按月对对象数组进行排序

Question

I am working with the dashboard and I have a chart in which I have to show count against month label. I have an array of objects with count and month Key. I want to sort this array of objects in Ascending order with month key value. I tried below code works fine in chrome but array does on get sorted in Firefox.

var xAxis =  [
{count: 0, month: "Jan 2019"},
{count: 7, month: "Dec 2019"},
{count: 0, month: "Feb 2019"},
{count: 0, month: "Jul 2019"}
] 

 xAxis.sort(function(a, b) {
  var c = new Date(a.month);
  console.log("TCL: CountByUserGraph -> makeApiCall -> c", c)
  // Chrome showing  ==> Tue Jan 01 2019 00:00:00 GMT+0530 
  //firefox showing  ==> Invalid Date
  var d = new Date(b.month);
  return c - d;
});

Answer 1

You can create an array which contains all of the short names of the months. Then, splitting the string in your input to get the short name of the month, and comparing it with the items in the array.

 var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']; var xAxis = [ {count: 0, month: "Jan 2019"}, {count: 7, month: "Dec 2019"}, {count: 0, month: "Feb 2019"}, {count: 0, month: "Jul 2019"} ]; var output = xAxis.sort(function (a, b) { return months.indexOf(a.month.substr(0, 3)) - months.indexOf(b.month.substr(0, 3)) }); console.log(output);

Answer 2

Firefox's Date implementation cannot parse strings in MMM YYYY format like the ones in your example. Consider using a different format. If you must use this format, consider using a library that allows you to parse these dates across browsers like Momentjs or date-fns .

Answer 3

You made a typo. Let me show you:

 var xAxis = [ {count: 0, month: "Jan 2019"}, {count: 7, month: "Dec 2019"}, {count: 0, month: "Feb 2019"}, {count: 0, month: "Jul 2019"} ] xAxis.sort(function(a, b) { var c = new Date(a.month); // console.log("TCL: CountByUserGraph -> makeApiCall -> c", c) // Chrome showing ==> Tue Jan 01 2019 00:00:00 GMT+0530 //firefox showing ==> Invalid Date var d = new Date(b.month); return c - d; }); console.log(xAxis);

the typo line was var d = ... . You were setting both dates to the a value

[edit] please note: the code I posted above works in Chrome, but a user Alexander posted below that the same code will not work in every browser.

Answer 4

const sortByMonth = arr => {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  const getIndexOfMonth = month => months.indexOf(month)
  return [ ...arr ].sort((left, right) => {
    const [ leftMonth, leftYear ] = left.month.split(' ')
    const [ rightMonth, rightYear ] = right.month.split(' ')
    if (leftYear !== rightYear) {
      return parseInt(leftYear) - parseInt(rightYear)
    }
    return getIndexOfMonth(leftMonth) - getIndexOfMonth(rightMonth)
  })
}

var xAxis =  [
  {count: 0, month: "Jan 2019"},
  {count: 7, month: "Dec 2019"},
  {count: 0, month: "Dec 2017"},
  {count: 0, month: "Jun 2018"},
  {count: 0, month: "Feb 2019"},
  {count: 0, month: "Jul 2019"},
];

sortByMonth(xAxis)
/* 
[
  { count: 0, month: 'Dec 2017' },
  { count: 0, month: 'Jun 2018' },
  { count: 0, month: 'Jan 2019' },
  { count: 0, month: 'Feb 2019' },
  { count: 0, month: 'Jul 2019' },
  { count: 7, month: 'Dec 2019' }
]
*/

This code will also compares the year as well as month