Iterate json object array and sort it based on key with Protoype JS

Question

Sorry if this question is a duplicate but I have to ask it. I am using prototype JS for reading JSON data from a file. JSON data looks like this;

{
    "metaData": {
        "date": "2014-10-06"
    },
    "listOf": [
        {
            "fname": "bill",
            "id": 23
        },
        {
            "fname": "tom",
            "id": 35
        },
        {
            "fname": "jerry",
            "id": 12
        },
        {
            "fname": "batman",
            "id": 68
        },
        {
            "fname": "superman",
            "id": 55
        },
        {
            "fname": "sp-m/super",
            "id": 55
        },
    ]
}

In my code I need to access "listOf" key/array and then I want to loop through each element and to sort those elements base on "fname" key. I am reading this data through an ajax request. Below is that code;

new Ajax.Request('/file.json', {
                    method:'get',
                    onSuccess: function(transport){
                        var json = transport.responseText.evalJSON();
                        console.log(json);
                    }
                });

Now the VAR JSON contains the require data but I don't know how to access "listOf" data and iterate through it.

I tried to use .each function like this;

json.list.each(alert);

but it only printed " object OBJECT".

Please give me some help to resolve this issue.

P.S: Please tyr to use prototype JS for an answer but no Jquery.

Assuming that you actually used `json.listOf.each(alert)`, then that's the expected result - the same result that e.g. `alert({ "fname": "bill", "id": 23 })` would have. — Bergi, Oct 07 '14 at 19:45

score 3 · Accepted Answer · answered Oct 07 '14 at 19:43

3

You can access the listOf collection property using its name:

json.listOf

So if you wanted to sort the array you could try using the .sort() javascript method:

json.listOf.sort(function(a, b) {
    if (a.fname > b.fname) {
        return 1;
    } else if (a.fname < b.fname) {
        return -1;
    }
    return 0;
});

// At this stage json.listOf will contain the sorted in-place array using the `fname` property

and here's a sample jsfiddle illustrating this in action.

answered Oct 07 '14 at 19:43

Darin Dimitrov

1,023,142
271
3,287
2,928

Thanks for your reply. I just edited the "listOf" property with an extra value. In that the sort does not sort the elements/list properly. It place the "sp-m/super" before "superman". Any idea how this can be fix? you can try this your jsfiddle code. – Capri82 Oct 07 '14 at 19:58
Why are you surprised that `sp-m` or `super` is placed alphabetically before `superman`? That's how alphabetical sort works. If you want to perform some custom sorting that feel free to update the anonymous function passed to the `.sort()` method to suit your custom needs. – Darin Dimitrov Oct 07 '14 at 20:04
:) I am not surprised but not understood the sorting completely. Anyway can you atleast put me in right direction that how can i put the words like "superman" before "sp-m/super". Some hints will be enough. – Capri82 Oct 07 '14 at 20:17
You wanna do inverse alphabetical order? Then just change the `if` condition. If not please specify what are the precise rules you wanna be sorting upon. Without knowing the precise rules it's quite unlikely you will be able to implement them. – Darin Dimitrov Oct 07 '14 at 20:23
What you have shown in your demo is correct. Only thing is the "listOf" property can contains values like "superman", "sv-m/ratio". And "sv-m" in sorting should come after "superman" so I want to place it ("sv-m/ratio") in the end of list. Explanation may look incomplete or confusing but this is all I know. – Capri82 Oct 07 '14 at 20:39
Well, `sv-m/ratio` will come **after** `superman` in my demo. Did you try it? Do you understand what alphabetical sort means? – Darin Dimitrov Oct 07 '14 at 20:40
Gotcha, try using the [`localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) function: `x.listOf.sort(function(a, b) { return a.fname.toLowerCase().localeCompare(b.fname.toLowerCase()); });` – Darin Dimitrov Oct 07 '14 at 20:57
Never mind I guess I have figured out the problem and sorting too :) – Capri82 Oct 07 '14 at 20:57
Yes, that's what I thought. I need to make the alphabets lowercase and then compare them. Thanks a lot anyway :) – Capri82 Oct 07 '14 at 20:58

Iterate json object array and sort it based on key with Protoype JS

1 Answers1