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

Я пишу приложение на 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>

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

Как вы хотите, чтобы конечная структура данных выглядела?

— 20.12.2020 21:12

arrays angular typescript sorting group-by

20.12.2020 21:10

Структурированный массив Numpy

Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...

3 эффективных способа найти максимальное значение в массивах JavaScript

T - 1Bits: Генерация последовательного массива

По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...

Что такое деструктуризация массива в JavaScript?

Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.

664

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info(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>

Пример можно посмотреть здесь

Как добавить больше полей в заголовок группы? Если, например, я также хочу отобразить заказ здесь: <span>{{e[0]}} {{заказ также здесь???}}</span>

— 17.01.2021 11:22

20.12.2020 21:31