Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ordering JSON data in a table

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;
        }
    });
});
like image 678
user2478342 Avatar asked Feb 21 '26 07:02

user2478342


1 Answers

you can use this to sort your array :

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

Here is the jsFiddle.

like image 118
Vinc 웃 Avatar answered Feb 22 '26 22:02

Vinc 웃