How to sort JSON Array

Question

I want to show my stats from JSON file sorted by "verbruik". Now I know how to sort an array if it has like one information with it like 1 = "12313", 3 = "2124".

I've put the whole JSON file in a variable:

for( var index in data)
                    {
                        var item = data[index];

Also could someone explain this very simply:

for (var index in data)

I know you can get use 3 parameters: value, key and index. But how does my code know which one is the value, key or index? Like when I only put index in it, it recognises it as a index and not as key.

NOTE:

I'am trying to understand and learn JQUERY and JSON, please have mercy for me.

JSON File:

{
    "46": {
        "voornaam": "Sergio",
        "achternaam": "Bloemenouw",
        "verbruik": "100000",
        "afdeling": "FHACI",
        "geslacht": "man",
        "verbruikPercentage": "18.2%"
    },
    "25": {
        "voornaam": "Chayenne",
        "achternaam": "Aalberink",
        "verbruik": "200000",
        "afdeling": "FHEHT",
        "geslacht": "vrouw",
        "verbruikPercentage": "36.4%"
    },
    "63": {
        "voornaam": "Theo",
        "achternaam": "Beijer",
        "verbruik": "50000",
        "afdeling": "FHCOM",
        "geslacht": "man",
        "verbruikPercentage": "9.1%"
    },
    "55": {
        "voornaam": "Xantha",
        "achternaam": "Dijenborgh",
        "verbruik": "80000",
        "afdeling": "FHJ",
        "geslacht": "vrouw",
        "verbruikPercentage": "14.5%"
    },
    "21": {
        "voornaam": "Steinar",
        "achternaam": "Beernink",
        "verbruik": "297000",
        "afdeling": "FHFM",
        "geslacht": "man",
        "verbruikPercentage": "54%"
    },
    "13": {
        "voornaam": "Oger",
        "achternaam": "Annevelink",
        "verbruik": "375000",
        "afdeling": "FHMER",
        "geslacht": "man",
        "verbruikPercentage": "68.2%"
    },
    "9": {
        "voornaam": "Liduin",
        "achternaam": "Bouwens",
        "verbruik": "400000",
        "afdeling": "FHMEM",
        "geslacht": "vrouw",
        "verbruikPercentage": "72.7%"
    },
    "39": {
        "voornaam": "Janique",
        "achternaam": "Brukink",
        "verbruik": "125000",
        "afdeling": "FHIBS",
        "geslacht": "vrouw",
        "verbruikPercentage": "22.7%"
    },
    "30": {
        "voornaam": "Germain",
        "achternaam": "Huisken",
        "verbruik": "180000",
        "afdeling": "JHAF",
        "geslacht": "man",
        "verbruikPercentage": "32.7%"
    },
    "5": {
        "voornaam": "Nigel",
        "achternaam": "Hoek",
        "verbruik": "400000",
        "afdeling": "Dienst IT",
        "geslacht": "man",
        "verbruikPercentage": "72.7%"
    },
    "3": {
        "voornaam": "Shelly",
        "achternaam": "Ameschot",
        "verbruik": "550000",
        "afdeling": "FHICT",
        "geslacht": "vrouw",
        "verbruikPercentage": "100%"
    },
    "61": {
        "voornaam": "Lucas",
        "achternaam": "Bernts",
        "verbruik": "60000",
        "afdeling": "FHDNP",
        "geslacht": "man",
        "verbruikPercentage": "10.9%"
    },
    "33": {
        "voornaam": "Dana",
        "achternaam": "Blokhuizen",
        "verbruik": "150000",
        "afdeling": "FYDES",
        "geslacht": "vrouw",
        "verbruikPercentage": "27.3%"
    },
    "23": {
        "voornaam": "Hidde",
        "achternaam": "Brandenborg",
        "verbruik": "250000",
        "afdeling": "FHKEE",
        "geslacht": "man",
        "verbruikPercentage": "45.5%"
    },
    "28": {
        "voornaam": "Noor",
        "achternaam": "Baek",
        "verbruik": "200000",
        "afdeling": "FOSO",
        "geslacht": "vrouw",
        "verbruikPercentage": "36.4%"
    },
    "26": {
        "voornaam": "Max",
        "achternaam": "den Diepenbroek",
        "verbruik": "200000",
        "afdeling": "FLOS",
        "geslacht": "man",
        "verbruikPercentage": "36.4%"
    },
    "27": {
        "voornaam": "Eulalie",
        "achternaam": "Kaszenborgh",
        "verbruik": "200000",
        "afdeling": "FLOT",
        "geslacht": "vrouw",
        "verbruikPercentage": "36.4%"
    },
    "32": {
        "voornaam": "Clarence",
        "achternaam": "Dolderman",
        "verbruik": "175000",
        "afdeling": "FDOO",
        "geslacht": "man",
        "verbruikPercentage": "31.8%"
    },
    "41": {
        "voornaam": "Regie",
        "achternaam": "Baankreise",
        "verbruik": "125000",
        "afdeling": "FHK",
        "geslacht": "vrouw",
        "verbruikPercentage": "22.7%"
    },
    "19": {
        "voornaam": "Ingeborg",
        "achternaam": "Aart",
        "verbruik": "350000",
        "afdeling": "MARCOM",
        "geslacht": "vrouw",
        "verbruikPercentage": "63.6%"
    },
    "47": {
        "voornaam": "Diederik",
        "achternaam": "Baajens",
        "verbruik": "100000",
        "afdeling": "FSH",
        "geslacht": "man",
        "verbruikPercentage": "18.2%"
    },
    "16": {
        "voornaam": "Fien",
        "achternaam": "Apenhorst",
        "verbruik": "350000",
        "afdeling": "FHTL",
        "geslacht": "vrouw",
        "verbruikPercentage": "63.6%"
    },
    "62": {
        "voornaam": "Dick",
        "achternaam": "Boeseken",
        "verbruik": "60000",
        "afdeling": "FHV",
        "geslacht": "man",
        "verbruikPercentage": "10.9%"
    },
    "48": {
        "voornaam": "Danielle",
        "achternaam": "Bello",
        "verbruik": "100000",
        "afdeling": "FHPM",
        "geslacht": "vrouw",
        "verbruikPercentage": "18.2%"
    },
    "70": {
        "voornaam": "Bertus",
        "achternaam": "Aelberdink",
        "verbruik": "30000",
        "afdeling": "FHHRM",
        "geslacht": "man",
        "verbruikPercentage": "5.5%"
    },
    "34": {
        "voornaam": "Manfred",
        "achternaam": "Cassenbarg",
        "verbruik": "150000",
        "afdeling": "FHPEG",
        "geslacht": "man",
        "verbruikPercentage": "27.3%"
    },
    "29": {
        "voornaam": "Jinny",
        "achternaam": "Bleeken",
        "verbruik": "200000",
        "afdeling": "FHSOC",
        "geslacht": "vrouw",
        "verbruikPercentage": "36.4%"
    },
    "49": {
        "voornaam": "Teresa",
        "achternaam": "Bresthuis",
        "verbruik": "100000",
        "afdeling": "FPZ",
        "geslacht": "vrouw",
        "verbruikPercentage": "18.2%"
    },
    "12": {
        "voornaam": "Mariska",
        "achternaam": "Borchert",
        "verbruik": "395000",
        "afdeling": "FHTNW",
        "geslacht": "vrouw",
        "verbruikPercentage": "71.8%"
    },
    "15": {
        "voornaam": "Leo",
        "achternaam": "Baggerman",
        "verbruik": "375000",
        "afdeling": "FHENG",
        "geslacht": "man",
        "verbruikPercentage": "68.2%"
    },
    "56": {
        "voornaam": "Marijn",
        "achternaam": "Dierkinck",
        "verbruik": "75000",
        "afdeling": "FHTEL",
        "geslacht": "man",
        "verbruikPercentage": "13.6%"
    },
    "6": {
        "voornaam": "Berry",
        "achternaam": "Backer",
        "verbruik": "400000",
        "afdeling": "FHBET",
        "geslacht": "man",
        "verbruikPercentage": "72.7%"
    },
    "50": {
        "voornaam": "Frederieke",
        "achternaam": "Hauser",
        "verbruik": "100000",
        "afdeling": "FHAUT",
        "geslacht": "vrouw",
        "verbruikPercentage": "18.2%"
    },
    "14": {
        "voornaam": "Marg",
        "achternaam": "Bouwhuis",
        "verbruik": "375000",
        "afdeling": "FSV",
        "geslacht": "vrouw",
        "verbruikPercentage": "68.2%"
    },
    "7": {
        "voornaam": "Ebe",
        "achternaam": "van de Braak",
        "verbruik": "400000",
        "afdeling": "DHFZ",
        "geslacht": "man",
        "verbruikPercentage": "72.7%"
    },
    "10": {
        "voornaam": "Jorrit",
        "achternaam": "Grootendorst",
        "verbruik": "400000",
        "afdeling": "DPO",
        "geslacht": "man",
        "verbruikPercentage": "72.7%"
    },
    "4": {
        "voornaam": "Desiree",
        "achternaam": "van der Kuil",
        "verbruik": "400000",
        "afdeling": "FCVB",
        "geslacht": "vrouw",
        "verbruikPercentage": "72.7%"
    },
    "18": {
        "voornaam": "Chandni",
        "achternaam": "de Kleijn",
        "verbruik": "350000",
        "afdeling": "DFIN",
        "geslacht": "vrouw",
        "verbruikPercentage": "63.6%"
    }
}

Edit:

function compareFunction(a, b) 
{
    var verbruikA = parseInt(a.verbruik);
    var verbruikB = parseInt(b.verbruik);

    if (verbruikA < verbruikB)
    {
      return -1;
    } 
    else if (verbruikA > verbruikB) 
    {
      return 1;
    } 
    else 
    {
      return 0;
    }
}
$(document).ready( function() {     

    $.ajax({
    url:"wifi_data.json",
    dataType: "json",
    success: function(data)
    {

        var item = [];
        for (var i in data) 
        {
            item.push(data[i]);
        }

        $("#container").html("<h1 id='tittel'>Top Wifi Downloaders</h1><div id='vakman'></div><p>Man</p><div id='vakvrouw'></div><p>Vrouw</p>");    



    }   
    item.sort([compareFunction]);
    });
});

can you change the source of json? Currently is an object which isn't sortable, is simpler using array of objects. ALternatively it's not hard to map the object to array either and then sort — charlietfl
– charlietfl, Commented Sep 11, 2014 at 17:57
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — emerson.marini
– emerson.marini, Commented Sep 11, 2014 at 17:57
Hi Charlietfl I've put the whole JSON file in a variable see edit. @Melancia thanks I'll read it right now. — user4024249
– user4024249, Commented Sep 11, 2014 at 18:01
but how is json file created? If it is dynamically created with server code you control changing the structure would help. If that's not feasible you need to map object to array which can be done with a few lines of code also — charlietfl
– charlietfl, Commented Sep 11, 2014 at 18:04

Populus · Accepted Answer · 2014-09-11 18:46:12Z

1

First of all: Javascript objects are not guaranteed to be ordered. Do not rely on any perceived ordering behaviour it may show, this is dependant on implementation of the javascript engine and can change without notice.

So use an array, and put your key as a field in your object. e.g.

var arr = [
    {
        "id": 46,
        "voornaam": "Sergio",
        "achternaam": "Bloemenouw",
        "verbruik": "100000",
        "afdeling": "FHACI",
        "geslacht": "man",
        "verbruikPercentage": "18.2%"
    },
    {
        "id": 25,
        "voornaam": "Chayenne",
        "achternaam": "Aalberink",
        "verbruik": "200000",
        "afdeling": "FHEHT",
        "geslacht": "vrouw",
        "verbruikPercentage": "36.4%"
    }
]

Now, look at this link: Array.prototype.sort() - Javascript | MDN

The syntax is:

arr.sort([compareFunction])

If you don't specify a compareFunction, it will do a simple > comparison, which for numbers is obvious, and for strings it performs a lexical comparison. There is no defined behaviour for objects, sorting an array of objects does nothing.

So you just need to define a compareFunction:

function compareFunction(a, b) {
    var verbruikA = parseInt(a.verbruik);
    var verbruikB = parseInt(b.verbruik);

    if (verbruikA < verbruikB) {
        return -1;
    } else if (verbruikA > verbruikB) {
        return 1;
    } else {
        return 0;
    }
}

And call:

arr.sort(compareFunction);

UPDATE: If you do not have control of the source of the JSON data, then just loop through the JSON object and add them all into an array, and use that array to sort and store the sorted data:

var arr = [];
for (var i in data) {
    arr.push(data[i]);
}

edited Sep 11, 2014 at 18:46

answered Sep 11, 2014 at 18:04

Populus

7,7003 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

charlietfl Over a year ago

OP wants to sort by verbruik property

Populus Over a year ago

@charlietfl that's an easy fix ;)

user4024249 Over a year ago

Hey, sorry for replying so late, was reading all the stuff and trying to understand it, thanks!

user4024249 Over a year ago

Hey man could I ask one thing more? Could you please look at my code, I don't understand why it doesn't work. It says: TypeError: item.sort is not a function item.sort([compareFunction])

Populus Over a year ago

@user4024249 your item is an object, which does not have the sort function; use the code at the bottom of my answer to construct an array from your JSON data, then run arr.sort(compareFunction)

|

Collectives™ on Stack Overflow

How to sort JSON Array

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related