Reorder JSON based on date using Jquery/JS

Question

Thanks ahead for your help!

I'm trying to reorder some objects so the newest ordered product would be first. So looking at the data below, the new order should be (from newest to oldest) product2, product3, and then product1.

{
    "candyResponse": {
        "product1": {
            "displayName": "Bubble Gum",
            "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod1?$146$",
            "orderDate": {
                "time": "11/03/2018"
            }
        },
        "product2": {
            "displayName": "Chocolate",
            "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod2?$146$",
            "orderDate": {
                "time": "03/05/2015"
            }
        },
        "product3": {
            "displayName": "Mints",
            "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod3?$146$",
            "orderDate": {
                "time": "09/20/2017"
            }
        }
    }
}

I tweaked the code from Sorting an array of JavaScript objects but I was not successful. Tried three ways...

candyResponse.sort(function(a, b) {
   return parseFloat(a.time) - parseFloat(b.time);
});

candyResponse.sort(function(a, b) {
   return parseFloat(a.orderDate) - parseFloat(b.orderDate);
});

candyResponse.sort(function(a, b) {
   return parseFloat(a.orderDate.time) - parseFloat(b.orderDate.time);
});

Thanks again for your help!

I would suggest you convert the JSON to an object first, because JSON is just a string and you wont have the properties you want — Jaromanda X, Apr 19 '18 at 00:46

score 0 · Accepted Answer · answered Apr 19 '18 at 00:52

candyResponse is an object, not an array - objects' property names are not reliably ordered, per the spec, so even if you did create a new object with the properties in the desired insertion order, it wouldn't be something to rely on.

Sort an array instead:

const candyResponse = {
  "product1": {
    "displayName": "Bubble Gum",
    "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod1?$146$",
    "orderDate": {
      "time": "11/03/2018"
    }
  },
  "product2": {
    "displayName": "Chocolate",
    "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod2?$146$",
    "orderDate": {
      "time": "03/05/2015"
    }
  },
  "product3": {
    "displayName": "Mints",
    "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod3?$146$",
    "orderDate": {
      "time": "09/20/2017"
    }
  }
};
const getTime = ([_, product]) => {
  return new Date(product.orderDate.time);
};
const sortedCandyArr = Object.entries(candyResponse)
  .sort((a, b) => getTime(b) - getTime(a));
console.log(sortedCandyArr);

CertainPerformance, thanks this is really helpful! And thanks for clarifying candyResponse. — user2428993, Apr 19 '18 at 13:11

score -1 · Answer 2 · answered Apr 19 '18 at 00:49

-1

Well, you don't have an array of javascript objects, you just have a javascript object. That being said, you could do:

var data = {
    "candyResponse": {
        "product1": {
            "displayName": "Bubble Gum",
            "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod1?$146$",
            "orderDate": {
                "time": "11/03/2018"
            }
        },
        "product2": {
            "displayName": "Chocolate",
            "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod2?$146$",
            "orderDate": {
                "time": "03/05/2015"
            }
        },
        "product3": {
            "displayName": "Mints",
            "imageURL": "https://dummyimage.com/200x200/000/ffffff.png&text=prod3?$146$",
            "orderDate": {
                "time": "09/20/2017"
            }
        }
    }
}

var sorted = Object.keys(data.candyResponse)
            .sort((a, b) => 
                 new Date(data.candyResponse[a].orderDate.time).getTime() - 
                  new Date(data.candyResponse[b].orderDate.time).getTime());
                  
data.candyResponse = sorted.reduce((carry, current) => { carry[current] = data.candyResponse[current]; return carry; }, {});
console.log(data)

answered Apr 19 '18 at 00:49

dave

50,635
4
62
77

This is not reliable and mustn't be considered to "solve" the problem. – Ele Apr 19 '18 at 00:54
not reliable... how? he has an object. the only way to even think of it as "sorted" would be this way. If he does want an array, it's pretty clear how to do it - you use .map instead of .reduce. But there isn't a "more reliable" way to "sort" an object. – dave Apr 19 '18 at 01:03
**Just take a look:** [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) your approach is not reliable for sure. – Ele Apr 19 '18 at 01:06
@Ele - That reference (from 7 yrs ago) is no longer valid. ES6 does provide certainty of object property order based upon, int prop types ,followed by strings, followed by Symbols. That references also relies on the third edition of the spec. Here is the _active_ (if you can call it that) definition: https://www.ecma-international.org/ecma-262/6.0/#sec-terms-and-definitions-object Please note the lack of mention of order in that definition compared to the earlier version. – Randy Casburn Apr 19 '18 at 01:10
@RandyCasburn the order of property names is still not guaranteed nowadays. – Ele Apr 19 '18 at 01:23
@Ele - ES6: https://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-ownpropertykeys – Randy Casburn Apr 19 '18 at 01:28
@Ele - Where is Bergi when we need him? https://esdiscuss.org/topic/nailing-object-property-order – Randy Casburn Apr 19 '18 at 01:33

Reorder JSON based on date using Jquery/JS

2 Answers2