How to reverse sort a javascript object by timestamp

Question

I cannot seem to properly reverse sort a Javascript object by timestamp. I got the idea from this SO post here and this post: here.

Issue:

1) object is already sorted on console log for some reason 
2) sorting seems to have had no effect

Code:

var map = {1505932515: "some item", 1505932695: "some item", 1505832202: "some item", 1508425777: "some item", 1508872138: "some item", 1509022385: "some item", 1509034662: "some item"}
console.log(map); // Why is this already sorted anyway

var sortedMap = {};
Object.keys(map).sort().reverse().forEach(function(key) {
sortedMap[key] = map[key];
});
console.log(sortedMap);

Live testing: JS Bin

This is test on Google Chrome.

What should your final result be? Just timestamps or the objects sorted by timestamps? — JohanP, Nov 08 '17 at 04:32
JavaScript Object keys are Strings. After casting you need to pass a function to `.sort(function(a, b){ return a-b; })` to get numeric values to work correctly. — StackSlave, Nov 08 '17 at 04:36

JohanP · Accepted Answer · 2017-11-08T21:04:22.587

1

Your sort function, the way you are doing, is sorting strings, you need to convert it to number. Then as PHPGlue has mentioned, your Objects don't care about insertion order, it will just do what the native implementation says it should do. Thus if you insert in descending order, you possibly won't get descending order back. However, Map does respect the order. You can do this:

var map = {1505932515: "some item", 1505932695: "some item", 1505832202: "some item", 1508425777: "some item", 1508872138: "some item", 1509022385: "some item", 1509034662: "some item"};

var map = Object.keys(map).sort(function(a,b){ return +b - +a;}).reduce(function(t,k) {
    t.set(k,map[k]);
    return t;
},new Map());

map.forEach(function(v,k) {
 console.log(k,v);
});

The + operator in sort function is shorthand way of converting string to a number.

edited Nov 08 '17 at 21:04

answered Nov 08 '17 at 04:43

JohanP

4,244
1
18
30

Edited for non es6 syntax – JohanP Nov 08 '17 at 05:07
cool but is there anyway to have only 1 map instead of n maps at the end? See https://jsbin.com/vuneqegoxa/edit?js,console – kevin_b Nov 08 '17 at 14:20
this is great, do you mind explaining the code here? particularly the map reduce – kevin_b Nov 08 '17 at 21:10
`The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.`https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b. `Map` is an object that almost works like a hash/object but it respects insertion order, so you get all the goodies of hashes but more. – JohanP Nov 08 '17 at 21:15

score 1 · Answer 2 · answered Nov 10 '17 at 04:22

const map = {
  1505932515: "some item",
  1505932695: "some item",
  1505832202: "some item",
  1508425777: "some item",
  1508872138: "some item",
  1509022385: "some item",
  1509034662: "some item"
};
let sorted = Object.keys(map).sort( (a,b) => b - a).reduce( (ac, item) => { ac.set(item,map[item]); return ac } , new Map());

StackSlave · Answer 3 · 2017-11-08T05:08:30.673

Read my comment. Here's what I would do:

//<![CDATA[
/* external.js */
var doc, bod, E, old = onload; // for reuse onload
onload = function(){
if(old)old(); // change var name if using technique on other pages
doc = document; bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
var map = {1505932515:'was first', 1505932695:'was second', 1505832202:'was third', 1508425777:'was fourth', 1508872138:'was fifth', 1509022385:'was sixth', 1509034662:'was seventh'};
var out = E('out'), keysInOrder = [];
for(var i in map){
  keysInOrder.push(+i);
}
keysInOrder.sort(function(a, b){
  return a-b;
});
for(var i=0,k,l=keysInOrder.length; i<l; i++){
  k = keysInOrder[i]; out.innerHTML += k+' : '+map[k]+'<br />';
}
}
//]]>

/* external.css */
html,body{
  padding:0; margin:0; background:#000;
}
.main{
  width:940px; background:#fff; padding:20px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Sort an Object by Numeric Keys</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
  <body>
    <div class='main'>
      <div id='out'></div>
    </div>
  </body>
</html>

you are sorting an array this way, that's fine but i still want to keep the values — kevin_b, Nov 08 '17 at 05:00
I changed a few things. How about now? By the way Object Objects cannot be sorted. The iterations will appear in the order your Browser sees fit. — StackSlave, Nov 08 '17 at 05:02

How to reverse sort a javascript object by timestamp

3 Answers3