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

В данном массиве я группирую по свойству с именем Value, и результатом является объект, где ключ — это Value, а значение соответствует arrays. Теперь я пытаюсь зациклить и вывести все data по key.
Таким образом, желаемым результатом будет отображение всех объектов по его ключу. Что-то вроде скриншота ниже, только в моем случае данные сгруппированы по Value.

Вот код и ссылка на песочницу

import "./styles.css";
import { groupBy } from "lodash";

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" }
];
export default function App() {
  const grouppedByValue = groupBy(data, "Value");
  console.info(grouppedByValue);
  console.info(Object.keys(grouppedByValue));
  return (
    <div className = "App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Можете ли вы привести пример того, как должен выглядеть вывод, пожалуйста?

— 05.05.2022 17:54

javascript reactjs

05.05.2022 17:49

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 3

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

вы можете использовать Object.entries для этого таким образом

import "./styles.css";
import { groupBy } from "lodash";

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" }
];
export default function App() {
  const grouppedByValue = groupBy(data, "Value");
  console.info(grouppedByValue);
  console.info(Object.keys(grouppedByValue));
  return (
    <div className = "App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Object.entries(grouppedByValue).map(([value, items]) => <div key = {value}>
  <div>{value}</div>
   <ul>
     {items.map((item, i) => <li key = {i}>Phase :{item.Phase} </li>)
   </ul>
</div>)
    </div>
  );
}

05.05.2022 17:57

Пока вы не отредактируете сообщение, я предполагаю, что вы пытаетесь сопоставить каждый ключ объекта grouppedByValue, а затем перебираете массив каждого grouppedByValue[key].

Вот пример:

      {Object.entries(grouppedByValue).map(([key, value], kidx) => (
        <div key = {`k-${kidx}`}>
          {value.map((el, idx) => (
            <span key = {`el-${idx}`}>{JSON.stringify(el)}</span>
          ))}
        </div>
      ))}

Обратите внимание, что я использую kidx и idx, чтобы дать детям необходимые ключи в соответствии с запросом React.

В этом примере выводится весь объект, но не стесняйтесь извлекать из него необходимую информацию.

Если вы не знакомы с Object.entries(), посмотрите этот документация из MDN.

Это полная реализация, основанная на вашем образце.

import "./styles.css";
import { groupBy } from "lodash";

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" }
];
export default function App() {
  const grouppedByValue = groupBy(data, "Value");
  return (
    <div className = "App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Object.entries(grouppedByValue).map(([key, value], kidx) => (
        <div key = {`k-${kidx}`}>
          {value.map((el, idx) => (
            <span key = {`el-${idx}`}>{JSON.stringify(el)}</span>
          ))}
        </div>
      ))}
    </div>
  );
}

Output image

05.05.2022 18:00

Вы можете использовать Object.entries, чтобы получить и ключ, и значение одновременно.

Структура DOM, чтобы сделать ее похожей на скриншот OP.

import "./styles.css";
import { groupBy } from "lodash";

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" }
];
export default function App() {
  const grouppedByValue = groupBy(data, "Value");
  console.info(grouppedByValue);
  console.info(Object.keys(grouppedByValue));
  return (
    <div className = "App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Object.entries(grouppedByValue).map(([key, value]) => (
        <div>
          <div><strong>{key}</strong></div>
          {value.map((el) => (
            <div>{el.Phase}, {el.Step}, {el.Task}</div>
          ))}
        </div> 
      ))}
    </div>
  );
}