CODEWITHSUNDEEP
javascriptjqueryjson
dSquared
dSquared

Reputation: 9825

Ordering JSON Objects using jQuery

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.

Upvotes: 0

Views: 1052

Answers (3)

Marknl
Marknl

Reputation: 182

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

}

Upvotes: 2

fmsf
fmsf

Reputation: 37137

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

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

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.

Upvotes: 0

Related Questions