Ordering JSON Objects using jQuery

Question

I have the following JSON Object being loaded into my application and stored into a var called obj:

{
    "items" : [
    {
        "name" : "item-1",
        "group" : [
        {
            "groupName" : "name-1",
            "groupPosition" : 2
        },
        {
            "groupName" : "name-2",
            "groupPosition" : 1
        }]
    },
    {
        "name" : "item-2",
        "group" : [
        {
            "groupName" : "name-1",
            "groupPosition" : 1
        },
        {
            "groupName" : "name-2",
            "groupPosition" : 2
        }]
    }]
}

I then do the following to go through it:

var groups = new Array();
var items = new Array();
$.each(obj.items, function(i,r){
    var itemName = r.name;
    $.each(r.group, function(index, record){
        if ($.inArray(record.groupName) == -1) {
            groups.push(record.groupName);
            $('body').append('<div id="record.groupName"></div>');
        }
        $('#'+record.groupName).append('<div id="itemName">itemName</div>');
        // At this point I'm stuck as the items get added in order of iteration,
        // not according to their record.groupPosition value.
    });
});

There will eventually be several hundred "items" each contained within an unset number of "groups".

The trouble I'm having is how to iterate through the JSON object using jQuery or good ol'JavaScript and display the items in the correct position within each group as the items and groups won't be listed inside the JSON object in sequential order.

Any help would be greatly appreciated!

Thank you.

The ".sort()" function for arrays can be passed a function to be used as a comparator. — Pointy
– Pointy, Commented Oct 16, 2011 at 16:29
at what point you got stuck? reading the object? creating a new array? sorting it? this is a classic "do it for me" question. — dvir
– dvir, Commented Oct 16, 2011 at 16:29
Assuming this JSON originates at a server of your own control, have you considered doing the ordering there? Also, if you can, send an ARRAY of items rather than a OBJECT containing items. That way, the items can at least be sorted using normal sort routines on the front-end. — mkoistinen
– mkoistinen, Commented Oct 16, 2011 at 16:31
@mkoistinen Unfortunately I'm stuck with the object as it is used in other functions in the application. Sort routines would have been great. — dSquared
– dSquared, Commented Oct 16, 2011 at 16:36
@DvirAzulay Good point; I should have been clearer and provided more information. I've updated the OP. — dSquared
– dSquared, Commented Oct 16, 2011 at 17:08

Marknl · Accepted Answer · 2011-10-16 17:10:31Z

2

Why not just give the group items the position index like this:

{
"items" : [
{
    "name" : "item-1",
    "group" : {
    2:{
        "groupName" : "name-1",
        "groupPosition" : 2
    },
    1:{
        "groupName" : "name-2",
        "groupPosition" : 1
    }}

},
{
    "name" : "item-2",
    "group" : {
    1:{
        "groupName" : "name-1",
        "groupPosition" : 1
    },
    2:{
        "groupName" : "name-2",
        "groupPosition" : 2
    }}
}]

}

answered Oct 16, 2011 at 17:10

Marknl

1821 silver badge9 bronze badges

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

2 Comments

dSquared Over a year ago

Interesting... how would I then $.append() them to the Group div according to those positions? Wouldn't the $.each() function still go through them according to their order in the JSOn object?

Marknl Over a year ago

No it will loop through them according the key value. give it a try

Darin Dimitrov · Accepted Answer · 2011-10-16 16:28:32Z

0

Assuming you have a variable which is assigned to this:

var data = ...

you could use the $.each() method:

$.each(data.items, function(index, item) {
    // here item.name will contain the name
    // and if you wanted to fetch the groups you could loop through them as well:
    $.each(item.group, function(i, group) {
        // here you can use group.groupName and group.groupPosition
    });
});

Arrays ([]) in javascript are 0 index based and preserve their order when you are iterating over them.

answered Oct 16, 2011 at 16:28

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

1 Comment

dSquared Over a year ago

Sorry for not being clearer; I've updated the OP if you have any insight. Thank you!

fmsf · Accepted Answer · 2011-10-16 16:30:32Z

0

If I understood correctly your problem it is not about the sorting it self but how to link them to your dom nodes, solution: use classes with numbers.

For example:

$(".group"+items[1].group[0].grouposition").append(items[1].group[0].name);
// this will give append to the element with class="group1"

If you join this with having the html structure that is being generated to match the same names, then it won't be a problem and you don't have to sort them

answered Oct 16, 2011 at 16:30

fmsf

37.2k49 gold badges155 silver badges196 bronze badges

1 Comment

dSquared Over a year ago

Sorry for not being clearer; I've updated the OP if you have any insight. Thank you!

Collectives™ on Stack Overflow

Ordering JSON Objects using jQuery

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related