Grow your CSS skills. Land your dream job.

Parsing JSON into a table

  • # February 19, 2013 at 11:40 am

    I have a internal JSON list that I need to parse into a table on a page. The data is in no order but I would like it alphabatized based on the “Name” attribute. I have the connection to the data working and can see the response in Firebug, but I’m completely lost on how t o sort it and put it in a table. Can anyone help me.

    <html>
    <head>
    <title>DB API Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $.ajax({
    type: "POST"
    ,url: "https://test.my.site.com/api/api/db/"
    ,contentType: "application/json; charset=utf-8"
    ,dataType: "jsonp"
    ,data: "{}"
    ,success: function(res) {
    $.each(res, function() {

    });
    }
    });
    });
    </script>
    </head>
    <body>
    <p>This is a test</p>
    <table id="Results"></table>
    Check out this Pen!

    This is the structure of my JSON data: [{"id": ###, "Name":"This is a test","Vendor":null/text,"URL":"http://www.google.com","Coverage":"Full","Avability":null/text,"Descriptions":,"Description here."},{"id": ###, "Name":"This is a test","Vendor":null/text,"URL":"http://www.google.com","Coverage":"Full","Avability":null/text,"Descriptions":,"Description here."}]

    # February 19, 2013 at 12:01 pm

    on success, convert json string to javascript object

    use: http://api.jquery.com/jQuery.parseJSON/

    $.ajax({
    type: “POST”
    ,url: “https://test.my.site.com/api/api/db/"
    ,contentType: “application/json; charset=utf-8″
    ,dataType: “jsonp”
    ,data: “{}”
    ,success: function(res) {
    var obj = $.parseJSON(res);
    console.log(obj);
    //continue work here..
    }
    });

    # February 19, 2013 at 3:05 pm

    @mweldan – thanks for the response. I understand the converting an object but I’m lost on how to look the “obj” to show all of the items returned and I’m also lost on how to alphabetize the list.

    # February 19, 2013 at 3:40 pm

    i have created example codes for this:
    https://dl.dropbox.com/u/12386479/json_example.zip

    hope it helps.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".