Реагировать, упорядочивать и массив объектов (уменьшить и отобразить?)

Question

проблема заключается в следующем: (https://codesandbox.io/s/8p21n6p09l)

У меня есть массив объектов (называемых модулями), который выглядит так:

const modules = [
  {
    thematicArea: "Topic 1",
    id: 1,
    name: "Budowanie postawy asertywnej",
    details: [
      "Czym jest asertywność?",
      "Asertywny Asertywny menedżer – charakterystyczne zachowania"
    ]
  },
  {
    thematicArea: "Topic 2",
    id: 2,
    name: "Asertywne narzędzia",
    details: [
      "Asertywna odmowa – zastosowanie trzyetapowej procedury",
      "Technika „Zdartej płyty”",
      "Wyrażanie pochwał i próśb"        ]
  },
  {
    thematicArea: "Topic 3",
    id: 3,
    name: "Lorem ipsum 1",
    details: ["Coś się wymyśli", "Żeby nie było tak łyso"]
  },
  {
    thematicArea: "Topic 3",
    id: 4,
    name: "Lorem ipsum 2",
    details: [
      "Wyczesane szkolenia",
      "Naprawdępowinieneś wrzucić to do koszyka",
      "Na co czekasz - dodaj!"
    ]
  },
  {
    thematicArea: "Topic 3",
    id: 5,
    name: "Ipsum Lorem",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 6,
    name: "Ipsum Lorem 1",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 7,
    name: "Ipsum Lorem 2",
    details: ["Och", "Ach"]
  },

и этот массив передается из App.js в компонент thmaticArea.jsx. Дело в том, что я передумал при отображении данных и хочу сгруппировать их по тематической области, чтобы это выглядело так:

Topic 1: 
 - Name 1
 - Name 2
 - Name 6
 - ...
Topic 2:
 - Name 3
 - Name 5
Topic 3:
- Name 4
and so on.

Каждое имя уникально и может иметь только одну тематическую область (тему), но одна тематическая область (тема) может иметь несколько имен (имя 1, имя 2 ...).

Я считаю, что сначала мне нужно использовать метод redu () и затем .map (), но я пробовал это несколькими способами, и у меня это не сработало. Метод Reduce () создает массив без длины ... Вот как я пытался реализовать его с помощью Reduce в App.js и передать его компоненту thematicArea.jsx в виде 'modules':

modules={this.state.modules.reduce(function(groups, item) {
              const val = item["thematicArea"];
              groups[val] = groups[val] || [];
              groups[val].push(item);
              return groups;
            }, [])}

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

Answer 1

Если это не теоретический вопрос программирования, я думаю, что лучший способ - использовать _.groupBy из lodash или аналогичный. Иногда изобретать велосипед не нужно.

Answer 2

Вы можете использовать этот способ, и конечный результат должен быть object, а не array.

const modules = [{
        thematicArea: "Topic 1",
        id: 1,
        name: "Budowanie postawy asertywnej",
        details: [
            "Czym jest asertywność?",
            "Asertywny Asertywny menedżer – charakterystyczne zachowania"
        ]
    },
    {
        thematicArea: "Topic 2",
        id: 2,
        name: "Asertywne narzędzia",
        details: [
            "Asertywna odmowa – zastosowanie trzyetapowej procedury",
            "Technika „Zdartej płyty”",
            "Wyrażanie pochwał i próśb"
        ]
    },
    {
        thematicArea: "Topic 3",
        id: 3,
        name: "Lorem ipsum 1",
        details: ["Coś się wymyśli", "Żeby nie było tak łyso"]
    },
    {
        thematicArea: "Topic 3",
        id: 4,
        name: "Lorem ipsum 2",
        details: [
            "Wyczesane szkolenia",
            "Naprawdępowinieneś wrzucić to do koszyka",
            "Na co czekasz - dodaj!"
        ]
    },
    {
        thematicArea: "Topic 3",
        id: 5,
        name: "Ipsum Lorem",
        details: ["Och", "Ach"]
    },
    {
        thematicArea: "Topic 3",
        id: 6,
        name: "Ipsum Lorem 1",
        details: ["Och", "Ach"]
    },
    {
        thematicArea: "Topic 3",
        id: 7,
        name: "Ipsum Lorem 2",
        details: ["Och", "Ach"]
    }
];



let result = modules.reduce((obj, val) => {
    obj[val.thematicArea] = obj[val.thematicArea] || [];
    if (obj[val.thematicArea].indexOf(val.name) == -1)
        obj[val.thematicArea].push(val.name);
    return obj;
}, {});


console.log(result);

Answer 3

У меня есть пример с объектом или массивом в конце.

Это то, что вы хотите?

const modules = [{
    thematicArea: "Topic 1",
    id: 1,
    name: "Budowanie postawy asertywnej",
    details: [
      "Czym jest asertywność?",
      "Asertywny Asertywny menedżer – charakterystyczne zachowania"
    ]
  },
  {
    thematicArea: "Topic 2",
    id: 2,
    name: "Asertywne narzędzia",
    details: [
      "Asertywna odmowa – zastosowanie trzyetapowej procedury",
      "Technika „Zdartej płyty”",
      "Wyrażanie pochwał i próśb"
    ]
  },
  {
    thematicArea: "Topic 3",
    id: 3,
    name: "Lorem ipsum 1",
    details: ["Coś się wymyśli", "Żeby nie było tak łyso"]
  },
  {
    thematicArea: "Topic 3",
    id: 4,
    name: "Lorem ipsum 2",
    details: [
      "Wyczesane szkolenia",
      "Naprawdępowinieneś wrzucić to do koszyka",
      "Na co czekasz - dodaj!"
    ]
  },
  {
    thematicArea: "Topic 3",
    id: 5,
    name: "Ipsum Lorem",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 6,
    name: "Ipsum Lorem 1",
    details: ["Och", "Ach"]
  },
  {
    thematicArea: "Topic 3",
    id: 7,
    name: "Ipsum Lorem 2",
    details: ["Och", "Ach"]
  },
];

// If you want the values in an object
const retObject = modules.reduce((tmp, x) => {
  if (!tmp[x.thematicArea]) {
    tmp[x.thematicArea] = [x.name];
  } else {
    tmp[x.thematicArea].push(x.name);
  }

  return tmp;
}, {});

console.log('Value as object -----');
console.log(retObject);

// If you want the values in array
const retArray = Object.values(retObject);

console.log('Value as array -----');
console.log(retArray);