Как отсортировать массив на основе нескольких полей в JavaScript

Question

У меня есть объекты массива

events = [
   {
     year: "2019",
     month: "June",
     title: "title",
     desc: "desc"
   },
   {
     year: "2019",
     month: "June",
     title: "title",
     desc: "desc"
    },
    {
      year: "2019",
      month: "July",
      title: "title",
      desc: "desc"
    },
    {
      year: "2018",
      month: "June",
      title: "title",
      desc: "desc"
     },
     {
       year: "2018",
       month: "March",
       title: "title",
       desc: "desc"
     },
     {
       year: "2018",
       month: "March",
       title: "title",
       desc: "desc"
      }
    ]

Как мне отсортировать массив, чтобы показать похожие год и месяц, мне нужно использовать его в компоненте реагирования, например, одна строка будет отображать 2019 год июня, а другая -2019 июль и затем 2018 июнь и т. Д.,

любая помощь будет оценена

Answer 1

Вам нужно задать пользовательскую функцию сравнения для .sort сортировки по месяцу и году.

const events = [
   {
     year: "2019",
     month: "June",
     title: "title",
     desc: "desc"
   },
   {
     year: "2019",
     month: "June",
     title: "title",
     desc: "desc"
    },
    {
      year: "2019",
      month: "July",
      title: "title",
      desc: "desc"
    },
    {
      year: "2018",
      month: "June",
      title: "title",
      desc: "desc"
     },
     {
       year: "2018",
       month: "March",
       title: "title",
       desc: "desc"
     },
     {
       year: "2018",
       month: "March",
       title: "title",
       desc: "desc"
      }
];

// Custom comparator function
function sortByMonthYear(a, b) {
	const keyA = `${a.month} ${a.year}`;
	const keyB = `${b.month} ${b.year}`;
	
	if (keyA.localeCompare(keyB)) {
		return -1;
	}
	else if (keyA === keyB) {
		return 0;
	}
	return 1;
}


const grouping = events.sort(sortByMonthYear);

console.log(grouping);

---

Обновление:

Вы также можете группировать свои данные, используя Array#prototype#reduce

const events = [{
    year: "2019",
    month: "June",
    title: "title",
    desc: "desc"
  },
  {
    year: "2019",
    month: "June",
    title: "title",
    desc: "desc"
  },
  {
    year: "2019",
    month: "July",
    title: "title",
    desc: "desc"
  },
  {
    year: "2018",
    month: "June",
    title: "title",
    desc: "desc"
  },
  {
    year: "2018",
    month: "March",
    title: "title",
    desc: "desc"
  },
  {
    year: "2018",
    month: "March",
    title: "title",
    desc: "desc"
  }
];

const grouping = events.reduce((acc, curr) => {
  const key = `${curr.month} ${curr.year}`;
  if (!acc[key]) {
    acc[key] = [curr];
  } else {
    acc[key].push(curr);
  }
  return acc;
}, {});

console.log(grouping);

Answer 2

Создайте ссылку на все месяцы года и flatMap через них, в flatMap запустите фильтр по исходным событиям, чтобы вернуть только те события, которые имеют тот же month, что и текущий месяц в итерации. Как только вы это сделаете, вы можете запустить sort в списке, чтобы убедиться, что события отсортированы по year (от младшего к старому)

const MOY = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const events = [
 {year: "2019",month: "June",title: "title",desc: "desc"},
 {year: "2019",month: "June",title: "title",desc: "desc"},
 {year: "2019",month: "July",title: "title",desc: "desc"},
 {year: "2018",month: "June",title: "title",desc: "desc"},
 {year: "2018",month: "March",title: "title",desc: "desc"},
 {year: "2018",month: "March",title: "title",desc: "desc"}
]
    
  
const sortedByMonth = MOY.flatMap(m => events.filter(({month}) => m === month))
const sortedByYear = sortedByMonth.sort((eA, eB) => eA.year < eB.year) 
  
console.log(sortedByMonth)
console.log(sortedByYear)

ИЛИ, если вы хотите разделить события по месяцам, а по годам, тогда выполните

const MOY = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const events = [
 {year: "2019",month: "June",title: "title",desc: "desc"},
 {year: "2019",month: "June",title: "title",desc: "desc"},
 {year: "2019",month: "July",title: "title",desc: "desc"},
 {year: "2018",month: "June",title: "title",desc: "desc"},
 {year: "2018",month: "March",title: "title",desc: "desc"},
 {year: "2018",month: "March",title: "title",desc: "desc"}
] 
  
const sorted = MOY.flatMap(m => (
  events
  .filter(({month}) => m === month)
  .sort((eA, eB) => eA.year < eB.year)
))
  
console.log(sorted)