loop through javascript object with customized order

Question

I've been looking all over for a solution to my problem but can't seem to find any answers...so I'm not sure it's possible.

I have a javascript object with products info, so here's what it sort of looks like (note that it's already ordered the way I want it to be):

var prodType = {
  '7' : {'prodname' : 'Abel','prodtype' : 'Book', 'prodprice' : '49.00'},
  '212' : {'prodname' : 'Carl','prodtype' : 'Book', 'prodprice' : '49.00'},
  '211' : {'prodname' : 'Devon','prodtype' : 'Book', 'prodprice' : '49.00'},  
  '2' : {'prodname' : 'Sarah','prodtype' : 'Book', 'prodprice' : '49.00'},
  '10' : {'prodname' : 'Walter','prodtype' : 'Book', 'prodprice' : '49.00'}
}

And I loop through it to create a table for a certain plugin, so an example of how I get the info:

for(var val in prodType) {
   console.log('pid: '+val 
   + ' pname: '+prodType[val].prodname
   + ' pcategory: '+prodType[val].prodtype 
   + ' pprice: '+prodType[val].prodprice);
}

My problem is: I need to have it print ordered by prodname but keep the id as is - just like I'm providing it, since I'm using the ID for further DB handling. So, right now it prints:

pid: 2 pname: Sarah pcategory: Book pprice: 49.00
pid: 7 pname: Abel pcategory: Book pprice: 49.00
pid: 10 pname: Walter pcategory: Book pprice: 49.00
pid: 211 pname: Devon pcategory: Book pprice: 49.00
pid: 212 pname: Carl pcategory: Book pprice: 49.00

And I need it to look like this:

pid: 7 pname: Abel pcategory: Book pprice: 49.00
pid: 212 pname: Carl pcategory: Book pprice: 49.00
pid: 211 pname: Devon pcategory: Book pprice: 49.00
pid: 2 pname: Sarah pcategory: Book pprice: 49.00
pid: 10 pname: Walter pcategory: Book pprice: 49.00

Is is possible? If so, how? Thanks a bunch!

UPDATE

I've tried @go-oleg solution and turns out it won't work for my situation :( Here's what a sample of my real data looks like:

var prodType = {
  '211' : {'prodname' : '601A - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '49.00'},
  '212' : {'prodname' : '601B - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '49.00'},
  '214' : {'prodname' : '601C - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '49.00'},
  '224' : {'prodname' : '614A - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '0.00'},
  '225' : {'prodname' : '614C - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '0.00'},
  '231' : {'prodname' : '614D - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '0.00'},
  '226' : {'prodname' : '702B - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '49.00'},
  '227' : {'prodname' : '702C - Blahblah','prodtype' : 'CD-ROM', 'prodprice' : '49.00'},
  '217' : {'prodname' : 'COLL2 - Blahblah','prodtype' : 'Manual', 'prodprice' : '49.00'},
  '16' : {'prodname' : 'COLV - Blahblah','prodtype' : 'DVD', 'prodprice' : '100.00'},
  '119' : {'prodname' : 'UM - Blahblah','prodtype' : 'Manual', 'prodprice' : '29.00'},
  '235' : {'prodname' : 'WDS - Blahblah','prodtype' : 'Manual', 'prodprice' : '49.00'},
  '208' : {'prodname' : 'WTPO1 - Blahblah','prodtype' : 'Manual', 'prodprice' : '49.00'},
  '195' : {'prodname' : 'WTPO2 - Blahblah','prodtype' : 'Manual', 'prodprice' : '49.00'}
}

Hate to break this to you, but it's an object. It's not ordered at all, as far as ECMA-262 cares; even the fact that it's sorted is an implementation-specific detail. If you want order, use an array (whether to hold a list of keys, or the objects themselves) and sort that. — cHao, Aug 09 '13 at 17:23
See the cross browser issues talked about here (yes, it's the `delete` operator page but read the section) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues — Paul S., Aug 09 '13 at 17:50

go-oleg · Answer 1 · 2013-08-09T17:43:46.540

4

Object properties in JavaScript aren't ordered, so ideally prodType would be an Array to begin with. If you can't change the format/structure of prodType, you can sort the keys and then look up the values associated with the key:

var prodType = {
  '7' : {'prodname' : 'Abel','prodtype' : 'Book', 'prodprice' : '49.00'},
  '212' : {'prodname' : 'Carl','prodtype' : 'Book', 'prodprice' : '49.00'},
  '211' : {'prodname' : 'Devon','prodtype' : 'Book', 'prodprice' : '49.00'},  
  '2' : {'prodname' : 'Sarah','prodtype' : 'Book', 'prodprice' : '49.00'},
  '10' : {'prodname' : 'Walter','prodtype' : 'Book', 'prodprice' : '49.00'}
};

//`sort` will sort by the "dictionary" order and it looks like you want the opposite, so use `reverse`
Object.keys(prodType).sort().reverse().forEach( function (key) {

   console.log('pid: '+key 
   + ' pname: '+prodType[key].prodname
   + ' pcategory: '+prodType[key].prodtype 
   + ' pprice: '+prodType[key].prodprice);

} );

UPDATE: As noted by @plalx, using a sort function to do the sort you want the first time around is faster than using the default sort and then reversing:

Object.keys(prodType).sort(function(a,b) {
  return a > b ? -1 : (a === b? 0 : 1);
}).forEach( function (key) {
   console.log('pid: '+key 
   + ' pname: '+prodType[key].prodname
   + ' pcategory: '+prodType[key].prodtype 
   + ' pprice: '+prodType[key].prodprice);
} );

edited Aug 09 '13 at 17:43

answered Aug 09 '13 at 17:25

go-oleg

17,622
3
40
44

1

+1 for keeping original structure, that's probably a good idea for fast lookups if needed, however `sort().reverse()` is not very efficient, you should `.sort(function (a, b) { return a > b? -1 : (a === b? 0 : 1);});` instead. – plalx Aug 09 '13 at 17:35
I like your thinking - I can update it to be an array instead but I was just hoping I wouldn't have to. It works with simple words, but my current situation *for some reason* isn't working. I'll update my question with a closest example to my object. Thanks! – Fabi Aug 09 '13 at 17:42
@plalx: Thanks! Updated the answer – go-oleg Aug 09 '13 at 17:44
@Fabi: What do you want the output in the updated example to look like? Do you want the output ordered by `id`, or do you want it to be outputted in the same exact order as you have written. As others have noted, the latter is not possible because JavaScript does not maintain any sort of order of Object properties. How is `prodType` getting generated to begin with? – go-oleg Aug 09 '13 at 18:10
I want the output to be exactly in that order since it's been preordered from the DB. I'm going to go with @Neal solution since like you said it's not a possible task. Thank you though :) – Fabi Aug 09 '13 at 18:16

Naftali aka Neal · Accepted Answer · 2013-08-09T17:27:39.590

2

Objects in javascript are not sorted but they are randomly placed in the order, it just so happens that your browser sorts the Object keys.

I would suggest adding the id to the individual objects and store then in an ordered array:

var prodType = [
  {'prodname' : 'Abel','prodtype' : 'Book', 'prodprice' : '49.00', 'id': 7},
  {'prodname' : 'Carl','prodtype' : 'Book', 'prodprice' : '49.00', 'id': 212},
  {'prodname' : 'Devon','prodtype' : 'Book', 'prodprice' : '49.00', 'id': 211},
  {'prodname' : 'Sarah','prodtype' : 'Book', 'prodprice' : '49.00', 'id': 2},
  {'prodname' : 'Walter','prodtype' : 'Book', 'prodprice' : '49.00', 'id': 10}
];

Then you can do:

prodType.forEach(function(el){
   console.log('pid: '+ el.id
   + ' pname: '+ el.prodname
   + ' pcategory: '+ el.prodtype 
   + ' pprice: '+ el.prodprice);
});

edited Aug 09 '13 at 17:27

answered Aug 09 '13 at 17:22

Naftali aka Neal

138,754
36
231
295

1

Actually, object keys are unordered. http://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order Your solution is still the right one. – Trevor Dixon Aug 09 '13 at 17:24
It's kind of confusing to me, since it states it's unordered but once I'm looping through it, it's in order?? – Fabi Aug 09 '13 at 17:26
There is *no* ordering, or even lack thereof, specified for keys -- sorted, unsorted, insertion order, or otherwise. An object is just a collection of properties. Anything beyond that is implementation specific. – cHao Aug 09 '13 at 17:27
@Neal: Except that you've now said they're not sorted. Even *that* is off. They can be, or not, at the browser's whim. The order/sorting is *unspecified*. – cHao Aug 09 '13 at 17:31
@cHao I wrote "it just so happens that your browser sorts the Object keys" – Naftali aka Neal Aug 09 '13 at 17:32
I was hoping I wouldn't have to update my id's but it might be what I have to do..let me try both ways and I'll let you guys know. Thanks! – Fabi Aug 09 '13 at 17:44

loop through javascript object with customized order

2 Answers2