JS sorting works in Firefox, but not IE - I can’t understand why

Question

I have a string in a javascript function that sorts an array of objects based on the order of another array of strings. This works in firefox, but not in IE, and I don't know why. Here, my data looks like it is included in a sort call in IE7. (I use an array of three elements to illustrate here).

//cherry first then the rest in alphabetical order originalData = ['cherry','apple','banana','clementine','nectarine','plum'] //data before sorting - note how clementine is second item - we wan to to to be after apple and banana csub = [ {"value":"cherry","data":["cherry"],"result":"cherry"}, {"value":"clementine","data":["clementine"],"result":"clementine"}, {"value":"apple","data":["apple"],"result":"apple"}, {"value":"banana","data":["banana"],"result":"banana"}, {"value":"nectarine","data":["nectarine"],"result":"nectarine"}, {"value":"plum","data":["plum"],"result":"plum"} ] //after sorting, csub has been rearranged but still isn't right: clementine is before banana. in FF it in the right place. csubSorted = [ {"value":"cherry","data":["cherry"],"result":"cherry"}, {"value":"apple","data":["apple"],"result":"apple"}, {"value":"clementine","data":["clementine"],"result":"clementine"}, {"value":"banana","data":["banana"],"result":"banana"}, {"value":"nectarine","data":["nectarine"],"result":"nectarine"}, {"value":"plum","data":["plum"],"result":"plum"} ] 

Here is the actual sort code:

  csubSorted = csub.sort(function(a,b){ return (originalData.indexOf(a.value) > originalData.indexOf(b.value)); }); 

Can anyone understand why this will not work? Is the basic javascript sorting function not cross browser compatible? Can I do it differently (e.g. with jquery) which will be a cross browser?

grateful for any advice - max

EDIT - this also does not work in safari and chrome - in other words, it only works in firefox.

SOLVED - thanks to Tim Down. I really simplified the code because I realized that the order I needed is always "the first element in the returned array, followed by the rest of the array sorted using .value". So, I changed the code like this:

  first = csub.shift(); csubSorted = csub.sort(function(a,b){ return (a.value > b.value); }); csubSorted.unshift(first); 

But he still did not work. Then Tim (below) pointed out that sorting expects to get -1, 0 or 1 back from the function, NOT true or false, which is what my code returned. Obviously, firefox allows you to get away from this, but other browsers do not. All that was required was to “translate” the truth or falsehood into 1 and -1 (I'm not worried about the case where both lines are samae, effectively, which will be returned as -1, which will not make any difference to sorting order anyway):

  first = csub.shift(); csubSorted = csub.sort(function(a,b){ return (a.value > b.value ? 1 : -1); }); csubSorted.unshift(first); 

Tim also told me that array.indexOf () is not supported in IE, which is annoying, although I no longer use it here, I use it in other bits of code. Goddamit. Is there an API page somewhere that finally lists only javscript API compatible with multiple browsers?

Answer 1

Firstly, there is no indexOf array method in IE <= 8. You will need to write your own. Secondly, the comparison function passed to the sort() method of the array should return a number, not a boolean.

 var indexOf = (typeof Array.prototype.indexOf == "function") ? function(arr, val) { return arr.indexOf(val); } : function(arr, val) { for (var i = 0, len = arr.length; i < len; ++i) { if (typeof arr[i] != "undefined" && arr[i] === val) { return i; } } return -1; }; csubSorted = csub.sort(function(a,b){ return indexOf(originalData, a.value) - indexOf(originalData, b.value); });