Sorting JSON Object

Having a problem trying to sort a JSON object. Basically, people can add products in any random order to our order form, but the order it shows in the summary needs to be how we want them to be positioned (not the order they select them), so thats why I need to sort by 'id' (or we'll sort by a 'pos' field later)

Essentially, I need to sort by the id ascending. 1,2,103 instead of 2,103,1

I seem to be having issues because the index into the individual objects are numbers (or just the fact that they're there...).

I need to do something along the lines of array.sort(function(a,b){ return a.id-b.id }); but I'm presuming that doesn't work because 1, its not an array (its an object), and 2, it has those pesky indexes (that i need for another part of my code)...

Any ideas????

var products = {
    "2": {
        "id": "2",
        "price": "119",
        "quantity": "1",
        "thumb": "img\/store\/comp-08n.png"
    },
    "103": {
        "id": "103",
        "price": "109",
        "quantity": "1",
        "thumb": "img\/store\/basketballhoop.png"
    },
    "1": {
        "id": "1",
        "price": "309",
        "quantity": "1",
        "thumb": "img\/store\/comp-08.png"
    }
};

How many items do you need in your orders? You can safely sort 10'000 items in a Javascript array without much of speed issues. Why don't you work with a real array instead?

You could even inject custom properties to it, roughly something like

var products = [...];

products.findById = function(id) {
   for (var i=0, len=this.length; i<len; i++) {
      if (id == this[i].id) return this[i];
   }
   return null;
};

alert( products.findById(103).price );   // -> 119

and add predefined sorters like

products.sortById = function() {
    this.sort(function(a,b) {
        return a.id - b.id;
    });
};

products.sortById();   // sort array by product id

** EDIT **

On your PHP side, you might have something like :

$products = array(
    2 => array( 'id' => 2, ... ),
    103 => array( 'id' => 103, ... ),
    1 => array( 'id' => 1, ... ),
);

// get a JSON array
$jsonArray = json_encode(array_values($products));

will return what you need.

** NOTE **

You should not explicitly set indexes when adding new items in your array. Use the array's push function, like

products.push({id:123, price:200.49, quantity:1, thumb:'/path/to/file'});

Removing an item is a bit tricky, however, something like :

products.removeById = function(id) {
   for (var i=0, len=this.length; i<len; i++) {
      if (id == this[i].id) return this.splice(i, 1)[0];
   }
   return null;
};

products.removeById(123);    // -> returns the removed element! or null if nothing was removed

See demo here (use Chrome developper tools for console output).

There are two types of collections in JavaScript and in JSON:

1. key/value map (object) - unordered collection and
2. Array - index/value map (array) - ordered collection.

By definition only array can be sorted. Use array.

recursive solution, doesn't deal with arrays though, javascript

var alphabetizeJSON = function(obj){
    var key,
        array = [],
        stringifiedValuesObj = {},
        jsonKeyVal = "",
        i,
        keyName;

    for (key in obj) {
        if (typeof obj[key] === "object"){
            stringifiedValuesObj[key] = "" + alphabetizeJSON(obj[key]);
        } else {
            obj[key] = obj[key].replace(/\"/gi,'\\\"');
        }
        array.push(key);
    }

    array.sort();

    for (i = 0; i < array.length; i++){
        keyName = array[i];
        jsonKeyVal += '"' + keyName + '": ';
        jsonKeyVal += stringifiedValuesObj[keyName] ? stringifiedValuesObj[keyName] : '"' + obj[keyName] + '"';
        if (i < array.length - 1 ) {
            jsonKeyVal += ',';
        }
    }

    return '{ ' + jsonKeyVal + '}';
};

Check out JSONArrays. They might be what you need. http://json.org/java/

Indeed, you should be able to use an array instead of an object for this job, and that will solve a lot of your difficulty.

If you can't do that, you can convert the object into an array to give it ordering... something like this:

var a = []
for (var p in obj) {
  a[+p] = obj[p]
}

If you can't do that, you could dynamically add the information to the page in the order you want (the following is a bad idea)...

for (var i = 0; i < 10000; i++) {
  if (obj[i] !== undefined) {
    add_to_page(obj[i])  //define this somewhere
  }
}