使用jQuery对JSON对象进行排序

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

}

Answer 2

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.

Answer 3

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