Resort output for JSON (external file) imported data with jQuery

Question

I am quite new to this languages and trying to make sense of what's going on. I have managed to get data from an external JSON file and create a list from it. This is the contents from the JSON file:

{
    "player": [
        {
            "name": "John",
            "country": "USA",
            "score": 102400
        },
        {
            "name": "Mary",
            "country": "Australia",
            "score": 80001
        },
        {
            "name": "Jane",
            "country": "England",
            "score": 103900
        }
    ]
}

Now here is the fiddle with the HTML and js. http://jsfiddle.net/tusika_/ut3NZ/

As you can see, every ul is wrapped in a div with class "player". What I would like to achieve is to be able to sort those divs of class "player", by sorting alphabetically the name (default) or country or descending score of the players.

After two days of research and finding answers to similar questions, I managed to put the data into an array, and when I use the sort method and the function in the js, i see in the console that the objects do get sorted differently, however they only sort alphabetically for the first three objects and then the last two get not sorted (in the original file I have many more players than three). Also I do not undestand how to reprint of screen that new order. (it should replace the current output each time)

I would appreciate a response that indicates where the error of the logic is and doesn't only provide the code but helps me understand why the code is such.

Thank you very much!!!

May be you can find something here [http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects](http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects) — alioguzhan, May 26 '14 at 11:08
Thanks for commenting. I tried those responses before posting here. but did not work for me... — cara, May 26 '14 at 11:34

Gabriele Petrioli · Accepted Answer · 2014-05-27T11:52:33.600

The issue is (as you have noticed) the disconnection of the array order and the DOM order. You only use the array to create the DOM elements. They are not somehow linked so that what happens to one affect the other.

You will have to manually redraw the dom by either emptying the container and redrawint the element, or by re-arranging the existing DOM elements. For example you could have a function that will clear the #list element and then append the sorted nodes.

function displayData(array) {
    var list = $("#list").empty();
    $.each(array, function () {
       list.append("<div class='player'><ul><li>" + this['name'] + "</li><li>" + this['country'] + "</li><li>" + this['score'] + "</li></ul></div>");
    });
}

Also you do not need to sort the array while adding each element, just sort the whole of the array once.

So you can use the above code like this

var sorted = data.player.sort(byCountry);
displayData(sorted);

You can see a simple demo at http://jsfiddle.net/gaby/YhvTt/

Thank you very much! You made it easy to work and easy to understand. At some point I got stuck at that -disconnection- between DOM and effects. That worked like a charm. (Sorry I cannot vote you up, I don't have the privs.) — cara, May 26 '14 at 11:45

score 0 · Answer 2 · answered May 26 '14 at 11:36

0

When you're doing array.push(key, value);, you're pushing both the key and the value in the array (at position i and i+1).

OH, and BTW, you can simply do: data.player.sort(compare);

answered May 26 '14 at 11:36

Maurice Perry

32,610
9
70
97

Maurice, thanks for replying. I understand what you say, but I tried pushing only the value, and was only getting [0,1,2,3,4] and not the objects. Gaby's solution worked perfectly but I will still try your method. Thank you! – cara May 26 '14 at 11:49

Resort output for JSON (external file) imported data with jQuery

2 Answers2