Ordering JSON data in a table

Question

I am creating a "leaderboard" page as an external component to a Facebook game.

Basically the app is passing me data through a given JSON response file ('score.json' which contains data objects with three keys: Name, Team, Score), and I am parsing this into an HTML table using the code below:

$(document).ready(function(){
    $.getJSON("score.json",
    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);
        }
    });
});

What I need to do:

Display these table rows in descending order based on the "score" value.
Add a "rank" column with a dynamically generated number inserted with each row

I am just a beginner with JavaScript so any help would be much appreciated.

EDIT: Solved. Final code below:

$(document).ready(function(){
    $.getJSON("score.json",
    function (data) {
        var tr;

        data.sort(function(a,b) { return parseFloat(b.score) - parseFloat(a.score) } );

        var rank = 1;

        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + rank + "</td>");
            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);
            rank = rank +1;
        }
    });
});

You might be able to use some version of this... http://stackoverflow.com/questions/8419103/sort-json-alphabetically — ayyp, Jun 12 '13 at 14:32
You told us what you want to do but you haven't asked a question. Are you having any particular problems with these tasks? — Felix Kling, Jun 12 '13 at 14:40
possible duplicate of [Sorting objects in an array by a field value in JavaScript](http://stackoverflow.com/questions/1129216/sorting-objects-in-an-array-by-a-field-value-in-javascript) — Felix Kling, Jun 12 '13 at 14:41
Since you are a beginner, I really recommend to make yourself familiar with the JavaScript basics: http://eloquentjavascript.net/, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide. — Felix Kling, Jun 12 '13 at 14:44

score 3 · Accepted Answer · answered Jun 12 '13 at 14:37

3

you can use this to sort your array :

json.sort(function(a,b) { return parseFloat(b.score) - parseFloat(a.score) } );

Here is the jsFiddle.

answered Jun 12 '13 at 14:37

Vinc 웃

1,187
4
25
64

Thanks very much, this is just what I was looking for! Do you have an idea for how I can add a "rank" value to each row based on its overall position in the list? I figure on adding 1 to a numeric variable for each loop.. would this work? – user2478342 Jun 12 '13 at 14:47
2

@user2478342: Yes, it would. – Felix Kling Jun 12 '13 at 14:49
:D Thanks very much, I tried this method of ranking and have added my final code to the question post! – user2478342 Jun 12 '13 at 14:55
3

@user2478342: Even easier: `tr.append("" + (i+1) + "");` (instead of using `rank`). No need for an extra variable, you already have a counter. – Felix Kling Jun 12 '13 at 14:59

Ordering JSON data in a table

1 Answers1