up vote 1 down vote favorite

I'm trying to parse data from a page of JSON in my ASP.NET MVC 1.0 web application. I need this data to display in a table on page load and I'm having a great deal of trouble mainly because I've never used JSON before. The JQuery site gives pretty terrible examples as well. This is what I have so far, I need help writing a function:

$("document").ready(function() {
        $.getJSON("http://localhost:1909/encoders",
            function(data) {
                $.each(data.items, function() {

                });
            });
    });

The URL above is currently just displaying JSON and the two columns I am getting from the SQL server to produce the JSON are EncoderName and EncoderStatus. The id is displayencoders.

Thanks!

edit: my controller looks like this:

[UrlRoute(Name = "GetEncoders", Path = "encoders")]
        public ActionResult GetEncoders() {
            var encoders = Database.GetEncoders();

            return Json(encoders);
        }

when compiled my /encoders/ looks like:

{

    * EncoderName: "rmcp2-encoder"
    * EncoderStatus: "inactive"

}
share|improve this question
1  
What's the server-side code look like? – tvanfosson Jan 14 '10 at 19:49
1  
Also, what does your JSON look like? – Diodeus Jan 14 '10 at 20:05

3 Answers

up vote 3 down vote accepted 
$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        $("#div-my-table").text("<table>");

        $.each(data, function(i, item) {
            $("#div-my-table").append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>");
        });

        $("#div-my-table").append("</table>");

    });
});
share|improve this answer
thanks this was perfect! – user177215 Jan 14 '10 at 20:24
up vote 1 down vote

funnily enough, i use an almost similar methodology but instead of parsing the json, i actually apply the html formatting to the json structure from a helper method in my controller. so basically, my controller passes back a json result fully formatted and all the jquery function has to do is place it inside the relevant div which in this case is $('#propertyList').html(data).

here's kinda how it looks on the view:

<script type='text/javascript'>
    function GetLocationHighlites() {
        $.ajaxSetup({ cache: false });
        $.getJSON('/en/Property/GetLocationHighlites/', null,
            function(data) { JsonData(data); });
    }

    function JsonData(data) {
        if (data.length != 0) {
            $('#propertyList').html(data);
            $('#propertyList').slideDown('fast');
            return false;
        }
    };

    $(document).ready(function() {
        GetLocationHighlites();
    });
</script>

and in the controller:

    public JsonResult GetLocationHighlites()
    {
        IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury);
        string htmlBlock = string.Format(_block, block.Header, block.Content);
        return Json(htmlBlock);
    }

_block in the above JsonResult GetLocationHighlites() is a string constant along the lines of:

private string _block = @"<div class='Block'>
                       <div class='header'>
                        {0}
                       </div>
                       <div class='BlockContent-body'>
                        {1} 
                       </div>
                     </div>";

my take on the subject, and in this case, my (feeble :)) attempt to keep it DRY.

share|improve this answer
up vote 1 down vote

of course, you could ALSO/ALTERNATIVELY return a string (rather than a Json result). I actually got to thinking with the answer above and realised that this was perhaps the 'best case' for my purposes. so i now have (in view):

$.get('/en/Property/GetLocationHighlites/'

rather than:

$.getJSON('/en/Property/GetLocationHighlites/'

and have amended the controller function to:

public string GetLocationHighlites()
{
    IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury);
    string htmlBlock = string.Format(_block, block.Header, block.Content);
    return htmlBlock;
}

hope this doesn't muddy the waters...

share|improve this answer

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.