Jquery: Parsing JSON objects for HTML table

Question

I am trying to display a "leaderboard" table based on JSON data.

I have read a lot about the JSON format and overcome some initial obstacles, but my Javascript knowledge is very limited and I need help!

Basically my JSON data comes through looking like this:

[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]

What I need is to be able to loop through this array, generating a table row or list item for each object. There will be an unknown amount of total objects in the array but each will have the same format- three values: Name, Score, Team.

So far I have used the following code, which confirms that I am successfully loading the objects in the console-

$.getJSON(url,
function(data){
  console.log(data);
});

but I am not sure how to iterate over them, parsing them into the HTML table.

The next step is sorting the entries by score in descending order...

Any help would be much appreciated. Thanks!

EDIT:

Updated code below, this works:

$.getJSON(url,
function (data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].User_Name + "</td>");
        tr.append("<td>" + data[i].score + "</td>");
        tr.append("<td>" + data[i].team + "</td>");
        $('table').append(tr);
    }
});

(The $.parseJSON was not necessary, we can use 'data' as the JSON array is already parsed I believe)

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
possible duplicate of Access / process (nested) objects, arrays or JSON
@roasted: Well, yes. That's what OP stated in the question. It's JSON that's being parsed into an Array.
Please see the following posts: stackoverflow.com/questions/684672/… stackoverflow.com/questions/1078118/… stackoverflow.com/questions/8489288/…

pmandell · Accepted Answer · 2013-06-12 14:35:58Z

up vote 5 down vote accepted

Loop over each object, appending a table row with the relevant data each iteration.

$(document).ready(function () {
    $.getJSON(url,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].User_Name + "</td>");
            tr.append("<td>" + json[i].score + "</td>");
            tr.append("<td>" + json[i].team + "</td>");
            $('table').append(tr);
        }
    });
});

JSFiddle

edited Jun 12 at 14:35

answered Jun 12 at 13:28

pmandell
1,3239

Thanks very much for your quick reply- this definitely puts me on the right track. However when I replace the value of the json variable with $.getJSON(url) it does not seem to parse the array, console simply returns the whole object... – user2478342 Jun 12 at 13:54

1

@user2478342, see edit above. Use $.parseJSON – pmandell Jun 12 at 13:54

Thanks again- when I enter the url and run the script I am now getting "SyntaxError: JSON Parse error: Unexpected identifier "object" in the error console? – user2478342 Jun 12 at 13:58

Edited above! THanks Again @pmandell – user2478342 Jun 12 at 14:29

asked	1 month ago
viewed	249 times
active	1 month ago

Jquery: Parsing JSON objects for HTML table

1 Answer

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery html arrays json or ask your own question.

Linked

Jquery: Parsing JSON objects for HTML table

1 Answer

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery html arrays json or ask your own question.

Linked

Related