Sort JSON data by date javascript

Question

I am trying to sort my json data by date but its not working. here is what I am trying. please correct me where I am making mistake

Sample Code

var temp = [{
    "id": 17608,
    "title": "abc",
    "start": "2016-03-23 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}, {
    "id": 17608,
    "title": "def",
    "start": "2016-04-13 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}, {
    "id": 17608,
    "title": "ghi",
    "start": "2016-04-08 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}];

console.log(temp);

temp.sort(function(a, b) {
    if (new Date(a.start) == new Date(b.start)) {
        return a.row == b.row ? 0 : +a.row > +b.row ? 1 : -1;
    }

    return new Date(a.start) > (b.start) ? 1 : -1;
});

console.log(temp);

This is not JSON! It's a Javascript array with objects in it. — deceze
– deceze ♦, Commented Apr 6, 2016 at 7:42

Nina Scholz · Accepted Answer · 2016-04-06 07:41:42Z

6

You can use the date string for sorting, while it is an ISO 6801 date.

var temp = [{ "id": 17608, "title": "abc", "start": "2016-03-23 06:13:00.0", "backgroundColor": "#000000", "borderColor": "#000000", "textColor": "#fff" }, { "id": 17608, "title": "def", "start": "2016-04-13 06:13:00.0", "backgroundColor": "#000000", "borderColor": "#000000", "textColor": "#fff" }, { "id": 17608, "title": "ghi", "start": "2016-04-08 06:13:00.0", "backgroundColor": "#000000", "borderColor": "#000000", "textColor": "#fff" }];

temp.sort(function (a, b) {
    return a.start.localeCompare(b.start);
});

document.write("<pre>" + JSON.stringify(temp, 0, 4) + "</pre>");

answered Apr 6, 2016 at 7:41

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

Rajesh Dixit · Accepted Answer · 2016-04-06 07:44:43Z

2

You should use date.getTime() while comparing dates.

var temp= [{id:17608,title:"abc",start:"2016-03-23 06:13:00.0",backgroundColor:"#000000",borderColor:"#000000",textColor:"#fff"},{id:17608,title:"def",start:"2016-04-13 06:13:00.0",backgroundColor:"#000000",borderColor:"#000000",textColor:"#fff"},{id:17608,title:"ghi",start:"2016-04-08 06:13:00.0",backgroundColor:"#000000",borderColor:"#000000",textColor:"#fff"}];

console.log(temp);

temp.sort(function(a, b) {
  var d1 = new Date(a.start).getTime();
  var d2 = new Date(b.start).getTime();
  return d1<d2?-1:d1>d2?1:0;
});

console.log(temp);

answered Apr 6, 2016 at 7:44

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Comments

haim770 · Accepted Answer · 2016-04-06 07:46:36Z

2

Your code is fine, it's just that you're missing the second new Date() in your comparison:

return new Date(a.start) > (b.start) ? 1 : -1;

Should be:

return new Date(a.start) > new Date(b.start) ? 1 : -1;

The way it is now, you're simply comparing a Date object to string.

answered Apr 6, 2016 at 7:46

haim770

49.2k7 gold badges113 silver badges139 bronze badges

Comments

Emil Oberg · Accepted Answer · 2016-04-06 07:55:53Z

There are multiple ways of achieving this. Of them, the easiest would be to convert the strings to dates and substract them from each other to get a negative, positive or zero number:

temp.sort(function(a,b){
  return new Date(a.start) - new Date(b.start);
});

It is often believed that the sort function needs to return -1, 1 or 0. This is simply not true. It will sort the items based on if the number is positive, negative or zero. The ECMAScript specification states it as:

If comparefn is not undefined, it should be a function that accepts two arguments x and y and returns a negative value if x < y, zero if x = y, or a positive value if x > y.

Full example:

var temp = [{
    "id": 17608,
    "title": "abc",
    "start": "2016-03-23 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}, {
    "id": 17608,
    "title": "def",
    "start": "2016-04-13 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}, {
    "id": 17608,
    "title": "ghi",
    "start": "2016-04-08 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}];

console.log(temp);

temp.sort(function(a,b){
  // Convert strings to dates and substract.
  // This way you get a value which is negative, positive or zero
  return new Date(a.start) - new Date(b.start);
});

console.log(temp);

Asadbek Eshboev · Accepted Answer · 2022-01-21 06:26:57Z

0

  const groups = this.posts.reduce((groups, data) => {
    const date = data.published_date.split(' ')[0];
    if (!groups[date]) {
      groups[date] = [];
    }
    groups[date].push(data);
    return groups;
  }, {});

  // Edit: to add it in the array format instead
  const groupArrays = Object.keys(groups).map((date) => {
    return {
      date,
      posts: groups[date]
    };
  });

do this, it should work!

answered Jan 21, 2022 at 6:26

Asadbek Eshboev

1

Comments

user16938897 · Accepted Answer · 2022-04-11 05:23:25Z

        var temp = [{
        "id": 17608,
        "title": "abc",
        "start": "2016-03-23 06:13:00.0",
        "backgroundColor": "#000000",
        "borderColor": "#000000",
        "textColor": "#fff"
    }, {
        "id": 17608,
        "title": "def",
        "start": "2016-04-13 06:13:00.0",
        "backgroundColor": "#000000",
        "borderColor": "#000000",
        "textColor": "#fff"
    }, {
        "id": 17608,
        "title": "ghi",
        "start": "2016-04-08 06:13:00.0",
        "backgroundColor": "#000000",
        "borderColor": "#000000",
        "textColor": "#fff"
    }];
    
    
    
    const groups = this.temp.reduce((groups, data) => {
        const date = data.start.split(' ')[0];
        if (!groups[date]) {
          groups[date] = [];
        }
        groups[date].push(data);
        return groups;
      }, {});
    
      // Edit: to add it in the array format instead
      const groupArrays = Object.keys(groups).map((date) => {
        return {
          date,
          temps: groups[date]
        };
      });

console.log(groupArrays)

heyo · Accepted Answer · 2016-04-06 07:58:32Z

-1

var temp = [{
    "id": 17608,
    "title": "abc",
    "start": "2016-03-23 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}, {
    "id": 17608,
    "title": "def",
    "start": "2016-04-13 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}, {
    "id": 17608,
    "title": "ghi",
    "start": "2016-04-08 06:13:00.0",
    "backgroundColor": "#000000",
    "borderColor": "#000000",
    "textColor": "#fff"
}];

console.log(temp);

temp.sort(function(a, b) {
    return parseFloat(a.start) - parseFloat(b.start);
});

console.log(temp);

answered Apr 6, 2016 at 7:58

heyo

192 bronze badges

1 Comment

Nina Scholz Over a year ago

that would sort only by year.

Collectives™ on Stack Overflow

Sort JSON data by date javascript

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related