Javascript Sort Array by Value

Question

I have an AJAX call returning JSON like...

{
  490: "A",
  675: "B",
  491: "C",
  520: "D",
  681: "E",
  679: "F",
  538: "G"    
}

I then have it appending to a select using:

var output = jQuery.parseJSON(data);

$.each(output, function(key, value) {
    $el.append($("<option></option>")
       .attr("value", key).text(value));
});

I'd like to sort by the value so the output is A,B,C,D... as right now it just reads in order of the key.

Here's the kicker - seems to work fine in Firefox, not in Chrome.

have you checked the console in chrome to see what error if any you are getting? — Jon Taylor
– Jon Taylor, Commented Oct 19, 2012 at 20:47
What works fine in Firefox but not Chrome? Appending the output? Some sorting algorithm you're not showing us? — Heretic Monkey
– Heretic Monkey, Commented Oct 19, 2012 at 20:48
have you tried debugging in any way? for example outputting anything at any stage apart from just before and after the sort? — Jon Taylor
– Jon Taylor, Commented Oct 19, 2012 at 20:48

Anoop · Accepted Answer · 2012-10-19 20:54:09Z

23

first convert it into array, sort it, then create html. jsfiddle

var output = jQuery.parseJSON(data);
var temp = [];

$.each(output, function(key, value) {
    temp.push({v:value, k: key});
});
temp.sort(function(a,b){
   if(a.v > b.v){ return 1}
    if(a.v < b.v){ return -1}
      return 0;
});
$.each(temp, function(key, obj) {

$el.append($("<option></option>")
       .attr("value", obj.k).text(obj.v));
});

answered Oct 19, 2012 at 20:54

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user400654 Over a year ago

Why would you sort it with javascript if you are already sorting it with SQL? You're treating the symptoms instead of fixing the problem.

user400654 Over a year ago

What happens when another sort is added, or changed completely.

Anoop Over a year ago

@KevinB He has not mentioned about server side sorting in question. Am I missing something?

user400654 Over a year ago

It was mentioned in a comment "I have it sorting server-side, and that's (currently) the only sort (ORDER BY 'name')" and this too: "Yeah, the data I'm getting is 600 entries and a whole mess of information"

Anoop Over a year ago

@KevinB Even it sorted in server side it will not side effect here.

|

user400654 · Accepted Answer · 2012-10-19 21:27:09Z

2

Objects cannot be sorted. Try returning your JSON as an array to ensure it stays in the exact order that you return them in:

[
  {"id":490,"name":"A"},
  {"id":675,"name":"B"},
  {"id":491,"name":"C"},
  {"id":520,"name":"D"},
  {"id":681,"name":"E"},
  {"id":679,"name":"F"},
  {"id":538,"name":"G"}
]

Here's a fiddle with the original: http://jsfiddle.net/82BSm/2/ and changing to an array: http://jsfiddle.net/82BSm/1/

Updated per pst's comment

You could of course make the json response size smaller by separating the column names ("id" and "name") from the data and making it an array of arrays.

edited Oct 19, 2012 at 21:27

answered Oct 19, 2012 at 20:48

user400654

95.1k16 gold badges168 silver badges188 bronze badges

5 Comments

Jon Taylor Over a year ago

I don't think this is really a propblem since it seems the order in which it is returned is nothing to do with the order in which it should be displayed. It seems the OP wishes to sort a set of unsorted values, in which case the object he returned will do the job just fine. I may be completely wrong though

user400654 Over a year ago

@JonTaylor I agree, though i suspect the data he's actually using may not be what he has posted.

Fluidbyte Over a year ago

Yeah, the data I'm getting is 600 entries and a whole mess of information. I posted an example. The ID's are the ID's associated on the data-side.

user400654 Over a year ago

@Fluidbyte Right, look at the fiddles i just added, they show that when using an object, the sort order gets changed, but when using an array, it keeps the same sort order.

user166390 Over a year ago

+1 - as sorting on the server, if available, is a clean option. However, I would use [[490, "A"], ..] or [{id: 490, val: "A"}, ..] because 490 really isn't functioning as a key here.

David Sanders · Accepted Answer · 2012-10-19 21:02:10Z

0

How about something like this?

var output = jQuery.parseJSON(data);

var options = [];
$.each(output, function(key, value) {
    options.push(
        $("<option>").val(key).text(value)
    );
});

options.sort(function(a, b) {
    return a.text() > b.text();
});

answered Oct 19, 2012 at 21:02

David Sanders

4,1791 gold badge26 silver badges40 bronze badges

1 Comment

Craig Over a year ago

sort should should return an integer not a boolean (though a boolean does work in FF at least), so make it a.text() - b.text() to work in more browsers.

Collectives™ on Stack Overflow

Javascript Sort Array by Value

3 Answers 3

10 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related