How to sort a JS object of objects?

Question

I have built an object in PHP, used JSON_encode function and send it as a JSON string to my JS script via ajax. Then I convert it back to an object. The problem I am having is that I wanted to keep the object in the order that it was originally created in. Please see this picture of what the object looks like once I get it into JS:

When I created the object, it was sorted by the customer field alphabetically. The customer name starting with A would come first, B second, etc. As you can see, now, the first element of the object as customer starting with S. It looks like somehow it got automatically sorted by the key of the top-level object, which is an integer, so I understand why this happened.

So i want to do is re-sort this object so that all the sub-objects are sorted by the customer field alphabetically. Is this possible? If so, how do I do it?

Thanks!

Answer 1

It's probably the difference between a JavaScript Object and a JavaScript Array. Objects are more like hash tables, where the keys aren't sorted in any particular order, whereas Arrays are linear collections of values.

In your back end, make sure you're encoding an array, rather than an object. Check the final encoded JSON, and if your collection of objects is surrounded by {} instead of [], it's being encoded as an object instead of an array.

You may run into a problem since it looks like you're trying to access the objects by an ID number, and that's the index you want those objects to occupy in the final array, which presents another problem, because you probably don't want an array with 40,000 entries when you're only storing a small amount of values.

If you just want to iterate through the objects, you should make sure you're encoding an array instead of an object. If you want to access the objects by specific ID, you'll probably have to sort the objects client-side (i.e. have the object from the JSON response, and then create another array and sort those objects into it, so you can have the sorted objects and still be able to access them by id).

You can find efficient sorting algorithms (or use the one below from ELCas) easily via Google.

Answer 2

I've changed Fabricio Matée answer to become more flexible and return the sorted object.

function alphabetical_sort_object_of_objects(data, attr) {
    var arr = [];
    for (var prop in data) {
        if (data.hasOwnProperty(prop)) {
            var obj = {};
            obj[prop] = data[prop];
            obj.tempSortName = data[prop][attr].toLowerCase();
            arr.push(obj);
        }
    }

    arr.sort(function(a, b) {
        var at = a.tempSortName,
            bt = b.tempSortName;
        return at > bt ? 1 : ( at < bt ? -1 : 0 );
    });

    var result = [];
    for (var i=0, l=arr.length; i<l; i++) {
        var obj = arr[i];
        delete obj.tempSortName;
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                var id = prop;
            }
        }
        var item = obj[id];
        result.push(item);
    }
    return result;
}

Then just call the function like this

your_object = alphabetical_sort_object_of_objects(your_object, 'attribute_to_sort');

Answer 3

Here's a generic iteration function which pushes all objects into an array and sorts them by their customer property in a case-insensitive manner, then iterates over the sorted array:

function iterate(data) {
  var arr = [];
  for (var prop in data) {
    if (data.hasOwnProperty(prop)) {
      var obj = {};
      obj[prop] = data[prop];
      obj.tempSortName = data[prop].customer.toLowerCase();
      arr.push(obj);
    }
  }
  arr.sort(function(a, b) {
    var at = a.tempSortName,
        bt = b.tempSortName;
    return at > bt ? 1 : ( at < bt ? -1 : 0 );
  });

  for (var i = 0, l = arr.length; i < l; i++) {
    var obj = arr[i];
    delete obj.tempSortName;
    console.log(obj);
    for (var prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        var id = prop; //gets the obj "index" (id?)
      }
    }
    console.log(id);
    var item = obj[id];
    console.log(item.customer);
    //do stuff with item
  }
}

Fiddle

Answer 4

Just cycle through your data and sort it. I'm not using the most efficient sorter but the ideas is there.

var data = toArray(AJAX_Returned_JSON); // function to convert object to array
var sortedData = null;

for(var i=0; i<data.length - 1; i++){
  var temp = data[i];
  for(var j=i+1; j<data.length; j++){
    if(data[j].customer < temp.customer){
      temp = data[j];
    }
  }

  sortedData.push(temp);
}