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
– Jaromanda X, Commented Apr 19, 2018 at 0:46

CertainPerformance · Accepted Answer · 2018-04-19 00:52:17Z

0

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);

answered Apr 19, 2018 at 0:52

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

user2428993 Over a year ago

CertainPerformance, thanks this is really helpful! And thanks for clarifying candyResponse.

dave · Accepted Answer · 2018-04-19 00:49:50Z

-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, 2018 at 0:49

dave

65.1k6 gold badges81 silver badges98 bronze badges

7 Comments

Ele Over a year ago

This is not reliable and mustn't be considered to "solve" the problem.

dave Over a year ago

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.

Ele Over a year ago

Just take a look: Does JavaScript Guarantee Object Property Order? your approach is not reliable for sure.

Randy Casburn Over a year ago

@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: ecma-international.org/ecma-262/6.0/… Please note the lack of mention of order in that definition compared to the earlier version.

Ele Over a year ago

@RandyCasburn the order of property names is still not guaranteed nowadays.

|

Collectives™ on Stack Overflow

Reorder JSON based on date using Jquery/JS

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related