как группировать и сортировать объекты массива

#arrays #angular #typescript #sorting #group-by

#массивы #angular #typescript #сортировка #группировать по

Вопрос:

Я пишу приложение на TypeScript, я использую массив JSON, например:

 data = [{"name":"dog",
            "line":1,
"order":1},
            {"name":"cet",
            "line":1,
"order":2},
            {"name":"red",
            "line":2,
"order":1},
            {"name":"green",
            "line":2,
"order":2},
            {"name":"elephant",
            "line":1,
"order":3}]

Я хочу сгруппировать массив по «строке» и отсортировать в порядке возрастания
, а каждый объект в «строке» отсортировать по «порядку» и отобразить его на HTML-странице так, чтобы каждая «строка» была в отдельной строке.

 <div *ngFor="let d of data" >
   <div *ngFor="" class= "row">
      <span >{{d.name}}</span>
   <div> 
<div>

Каков наилучший способ группировки и сортировки, а затем просмотра?

Ответ №1:

На вашем месте (и если я правильно понял) я бы сгруппировал элементы с помощью .reduce() метода, затем отсортировал каждый из полученных массивов и в конце создал массив записей для повторения.

Группировка и сортировка могут выглядеть следующим образом:

 const data = [{"name":"dog", "line":1, "order":1},
            {"name":"cet", "line":1, "order":2},
            {"name":"red", "line":2, "order":1},
            {"name":"green", "line":2, "order":2},
            {"name":"elephant", "line":1, "order":3}];

const grouped = data.reduce((res, curr) => {
  res[curr.line] = res[curr.line] || [];
  res[curr.line].push(curr);
  return res;
}, {});

for (const group of Object.values(grouped)) {
  group.sort((a, b) => a.order - b.order);
}

const entries = Object.entries(grouped);

console.log(entries);

Развернуть фрагмент

И в вашем шаблоне повторите entries :

 <div *ngFor="let e of entries" >
   <div *ngFor="let group of e[1]" class= "row">
      <span>{{group.name}}</span>
   </div>
   <span>{{e[0]}}</span>
</div>

Вы можете увидеть пример здесь