Как сгруппировать массив объектов по значению для одного и того же элемента?

У меня есть вопрос, как я могу отобразить и уменьшить массив следующим образом:

[
    {
        id: 1,
        Price: 50,
        Item: {id: 1, Name: "A"},
        Date: {id: 1, Start: "202001"}
    },
    {
        id: 2,
        Price: 100,
        Item: {id: 1, Name: "A"},
        Date: {id: 2, Start: "202002"}
    },
    {
        id: 3,
        Price: 200,
        Item: {id: 2, Name: "B"},
        Date: {id: 1, Start: "202001"}
    }
]

Я пишу приложение в React и хочу показать эти значения, сгруппированные в таблице.

Это должно выглядеть примерно так:

ЭЛЕМЕНТ 202001 202002 А 50 100 Б - 200

Я хотел бы иметь возможность сделать это с массивом:

[
    {
        id: 1,
        Item: {id: 1, Name: "A"},
        Date: [{id: 1, Start: "202001",Price: "50"},{id: 2, Start: "202002",Price: "100"}]
    },
    {
        id: 2,
        Item: {id: 2, Name: "B"},
        Date: {id: 1, Start: "202001",Price: "200"}
    }
]

Любые предложения, чтобы добраться до того, что мне нужно?

какой результат вы хотите получить в итоге?

— 13.12.2020 21:35

Я вставил таблицу в формате Markdown, чтобы вы могли увидеть результат, который я хочу

— 13.12.2020 21:43

Пожалуйста, посмотрите этот пост. У него почти такой же вопрос. stackoverflow.com/a/34890276/9515661

— 13.12.2020 21:49

Пробовал следующее, но не группируется: const tempData = [ { id: 1, Price: 50, Item: {id: 1, Name: "A"}, Date: {id: 1, Start: "202001"} }, { id: 2, Price: 100, Item: {id: 1, Name: "A"}, Date: {id: 2, Start: "202002"} }, { id: 3, Price: 200, Item: {id: 2, Name: "B"}, Date: {id: 1, Start: "202001"} } ] var groupBy = function(xs, key) { return xs.reduce(function(rv, x) { (rv[x[key]] = rv[x[key]] || []).push(x); return rv; }, {}); }; console.info(groupBy(tempData, 'Item.Name'));

— 13.12.2020 22:56

javascript arrays json reactjs api

13.12.2020 21:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Ответы 2

Вы можете использовать groupBy метод lodash, чтобы сгруппировать набор данных в соответствии с Item.Name.

Сначала получите пакет:


npm i lodash.groupby

Затем используйте его в своем коде как

import groupBy from 'lodash.groupby'

const tempData = [
    {
        id: 1,
        Price: 50,
        Item: {id: 1, Name: "A"},
        Date: {id: 1, Start: "202001"}
    },
    {
        id: 2,
        Price: 100,
        Item: {id: 1, Name: "A"},
        Date: {id: 2, Start: "202002"}
    },
    {
        id: 3,
        Price: 200,
        Item: {id: 2, Name: "B"},
        Date: {id: 1, Start: "202001"}
    }
]

groupBy(tempData, 'Item.Name')

/*
Will result as below

{
    A: [
           //objects with 'Item.Name' === 'A'
       ],
    B: [
            //objects with 'Item.Name' === 'B'
       ]
}
*/

Затем вам нужно заполнить свою таблицу ключами внутри ответа от groupBy

Спасибо за помощь. Я получаю эту ошибку ./node_modules/lodash.groupby/index.js — Модуль не найден после установки lodash.groupby и запуска приложения.

— 13.12.2020 22:30

13.12.2020 21:50

Ответ принят как подходящий

Вы можете использовать Array.prototype.reduce(), а затем использовать Object.values следующим образом:

const arr = [
  {
      id: 1,
      Price: 50,
      Item: {id: 1, Name: "A"},
      Date: {id: 1, Start: "202001"}
  },
  {
      id: 2,
      Price: 100,
      Item: {id: 1, Name: "A"},
      Date: {id: 2, Start: "202002"}
  },
  {
      id: 3,
      Price: 200,
      Item: {id: 2, Name: "B"},
      Date: {id: 1, Start: "202001"}
  }
]

const res = Object.values(arr.reduce((acc, {Item, Date, Price}) => {
  if (!acc[Item.id]) {
    acc[Item.id] = {
      id: Item.id,
      Item,
      Date: [{...Date, Price}]
    };
  } else {
    acc[Item.id].Date = [...acc[Item.id].Date, {...Date, Price}];
  }
    
  return acc;
}, {}));

console.info(res);

Спасибо! Я проверю это, создав таблицу, а затем расскажу, что получилось.

— 14.12.2020 00:15

Я хотел упорядочить массив таким образом, чтобы упростить сопоставление данных. Каков наилучший способ перебрать его и отобразить значения в том виде, в котором они есть в таблице?

— 14.12.2020 01:00

@bonnegnu map() в порядке

— 14.12.2020 20:39

13.12.2020 23:26