Json: parse to display in HTML using JQuery

Question

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"

}

What's the server-side code look like?

tvanfosson
– tvanfosson

2010-01-14 19:49:29 +00:00
Commented Jan 14, 2010 at 19:49 — tvanfosson
– tvanfosson, Commented Jan 14, 2010 at 19:49
Also, what does your JSON look like?

Diodeus - James MacFarlane
– Diodeus - James MacFarlane

2010-01-14 20:05:08 +00:00
Commented Jan 14, 2010 at 20:05 — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jan 14, 2010 at 20:05

yojimbo87 · Accepted Answer · 2010-01-14 20:17:27Z

3

$("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>");

    });
});

answered Jan 14, 2010 at 20:17

yojimbo87

68.8k26 gold badges128 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jimi · Accepted Answer · 2010-01-14 21:58:51Z

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.

jimi · Accepted Answer · 2010-01-14 23:28:15Z

1

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...

answered Jan 14, 2010 at 23:28

jimi

892 bronze badges

Collectives™ on Stack Overflow

Json: parse to display in HTML using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related