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.

Answer 1

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
    }}
}]

}