How to sort an array of objects based on a property and another array giving the desired order?

Question

I have the following array:

var my_list = ["XXXS", "XXS", "XS", "S", "M", "L", "XL", "XXL", "XXXL"];

Then I've the following array of objects that I get from json:

my_json = [
    {
        size: "L",
        color: "black"
    }, {
        size: "M",
        color: "blue"
    }, {
        size: "XXL",
        color: "red"
    }, {
        size: "XXS",
        color: "red"
    }
];

I'm trying to sort the array of objects by the size basing in the order of my_list I've found sort functions, but it sorts alphabetically, I don't know if there is a simple way to do it.

Here is a jsfiddle where you can try: http://jsfiddle.net/ew3ZU/3/

To be clear:

ACTUAL OUTPUT

[{"size":"L","color":"black"},{"size":"M","color":"blue"},{"size":"XXL","color":"red"},{"size":"XXS","color":"red"}]

DESIRED OUTPUT

[{"size":"XXS","color":"red"},{"size":"M","color":"blue"}{"size":"L","color":"black"},{"size":"XXL","color":"red"}]

`Here is a jsfiddle where you can try:` so sweet..! But what did you try..? — Rajaprabhu Aravindasamy, Jun 11 '14 at 08:36
*"Then I've the following json:"* That's not JSON, that's also just an array (in this case, of objects). Hint: If you're in JavaScript code, it's not JSON. — T.J. Crowder, Jun 11 '14 at 08:39

King King · Answer 1 · 2014-06-11T08:53:59.033

3

You can try something like this:

//only modern browsers support indexOf method for an array
my_list.indexOf = function(e){
  for(var i = 0; i < this.length; i++){
    if(this[i] === e) return i;
  }
  return -1;
};
//the sorter to compare 2 object based on the property size.
function sorter(a,b){
  var s1 = my_list.indexOf(a.size);
  var s2 = my_list.indexOf(b.size)
  return s1 > s2 ? 1 : s1 < s2 ? -1 : 0;
}
my_json.sort(sorter);

Demo.

edited Jun 11 '14 at 08:53

answered Jun 11 '14 at 08:42

King King

61,710
16
105
130

3

***Please*** don't overwrite `Array.prototype.indexOf` if it's already provided by the JavaScript implementation!! (Which it is in all modern browsers.) – T.J. Crowder Jun 11 '14 at 08:43
1

I think the custom sorter function should return the difference of the two indexes when they exist. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort ; there is also a question of what to do if the index is undefined, because the property has an unexpected value, and whether that might require some if blocks to test and use alphabetical at the end of the list or similar. – Paul Jun 11 '14 at 08:51
@Paul yes, missed that. – King King Jun 11 '14 at 08:54

Brewal · Accepted Answer · 2014-06-11T08:46:02.250

2

You could have give it a try :

demo

var ordered_list = [];

for (i = 0; i < my_list.length; i++) {
    for (j = 0; j < my_json.length; j++) {
        if (my_list[i] == my_json[j].size) {
            ordered_list.push(my_json[j]);
        }
    }
}

edited Jun 11 '14 at 08:46

answered Jun 11 '14 at 08:39

Brewal

8,067
2
24
37

Don't use `for-in` to loop through arrays [unless you do it properly](http://stackoverflow.com/questions/9329446/how-to-do-for-each-over-an-array-in-javascript/9329476#9329476). – T.J. Crowder Jun 11 '14 at 08:41

score 1 · Answer 3 · answered Jun 11 '14 at 08:49

Demo try this

 var newMyJson = [];
for (var i = 0; i < my_list.length; i++) {

    var value = my_list[i];
    $.each(my_json, function (i, val) {

        if (value == val.size) {
            newMyJson.push(my_json[i]);
            return;
        }

    });
}

How to sort an array of objects based on a property and another array giving the desired order?

3 Answers3

Demo.