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!

Bypass

Did you iterate over the object to check? Chrome Dev Tools do not show the object properties in the actual iteration order. Please bear in mind that objects do not have a defined standard cross-browser iteration order, but these usually respect the order in which the properties were added. – Alfi

No, it is not possible to sort an object. Objects are always unsorted. – Obelize

yes I iterated over it, that is where I first saw the problem. when using a for loop, the objects iterate in the order they appear in that picture. – Bypass

You might be better off having each row be an object entry in an array; you could then sort the array by the customer name. You cannot rely on the iteration order of an object in JavaScript. – Dewar

Yes, your best bet is translating the object to an array as @Mathletics suggested. – Alfi

Just adding on to @Mathletics suggestion. After you have your array (let's call it json_array) you could sort it by doing this: json_array.sort(function(a, b){return a.customer > b.customer? 1: -1;}); – Kenton

@Kenton yes that is it, that works, after using this to convert it to an array: data = $.map(data, function(k, v) { return [k]; }); – Bypass

If you have control over the object, make an array on the server-side rather than returning an object you still have to massage. – Dewar

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.

Teriteria

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');

Abridgment

a little enhacement: Check type of data before call toLowerCase(), just in case it's a number. at obj.tempSortName = data[prop][attr].toLowerCase(); – Tmesis

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

Looseleaf

Answer 4

sortObject(object){
    if(typeof object === 'object'){
        if(object instanceof Date){
            return object;
        }
        if(object instanceof Array){
            return object.map(element => this.sortObject(element));
        } else {
            return Object.keys(object).sort().reduce((result, key) => {
                if(object[key] && object[key] !== null) {
                    result[key] = this.sortObject(object[key]);
                }
                return result;
            }, {});
        }
    }
    return object;
}

Invigorate