javascript - 渲染嵌套对象

Question

我的问题很琐碎，但我完全迷失了。

我正在使用Reactjs。我有一个像这样的对象数组:

const modules = [
  {
    thematicArea: "Topic 1",
    id: 1,
    name: "Name 1",
    details: [
      "Lorem ipsum",
      "Lorem ipsum 2"
    ]
  },
  {
    thematicArea: "Topic 2",
    id: 2,
    name: "Name 2",
    details: [
      "Lorem ipsum",
      "Lorem ipsum 2"
    ]
  },
  {
    thematicArea: "Topic 3",
    id: 3,
    name: "Name 3",
    details: [
      "Lorem ipsum",
      "Lorem ipsum 2"
    ]
  },

  {
    thematicArea: "Topic 1",
    id: 4,
    name: "Name 4",
    details: [
      "Lorem ipsum",
      "Lorem ipsum 2"
    ]
  },
{
    thematicArea: "Topic 3",
    id: 5,
    name: "Name 5",
    details: [
      "Lorem ipsum",
      "Lorem ipsum 2"
    ]
  }
]

我想将其渲染为:

Topic 1:
- Name 1
- Name 4

Topic 2:
- Name 2

Topic 3:
- Name 3
- Name 5

到目前为止，我已经尝试使用 LoDash _.groupBy 并处理一些 mapKeys、mapValues，但正如我在开始时所说的 - 我完全迷失了。请帮我找到最好的解决方案......

https://codesandbox.io/s/8p21n6p09l -> 这是一个沙箱，我需要在其中实现解决方案。源对象位于 App.js 中，我尝试在组件 -> thematicArea.jsx 中使用 LoDash 希望它能帮助我； )

Answer 1

首先创建一个对象，其键是thematicArea，其值是名称的数组，然后以所需的格式返回:

const modules=[{thematicArea:"Topic 1",id:1,name:"Name 1",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 2",id:2,name:"Name 2",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 3",id:3,name:"Name 3",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 1",id:4,name:"Name 4",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 3",id:5,name:"Name 5",details:["Lorem ipsum","Lorem ipsum 2"]}]

let themes = {};

modules.forEach(mod => {
  // if there already is an Key named `mod.thematicArea` put the current name in it
  if(themes[mod.thematicArea]) themes[mod.thematicArea].push(mod.name);
  // else create that property and make it an array containing the mod.name
  else themes[mod.thematicArea] = [mod.name];
});

console.log(themes)

/**themes = Object.keys(themes).map(key => {
  return (
    <div>
    <h3>{key}</h3>
    <ul>
    {themes[key].map(name => <li>{name}</li>)}
    </ul>
    </div>
  )
});**/

之后就可以渲染它了:

const modules=[{thematicArea:"Topic 1",id:1,name:"Name 1",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 2",id:2,name:"Name 2",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 3",id:3,name:"Name 3",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 1",id:4,name:"Name 4",details:["Lorem ipsum","Lorem ipsum 2"]},{thematicArea:"Topic 3",id:5,name:"Name 5",details:["Lorem ipsum","Lorem ipsum 2"]}]

let themes = {};

modules.forEach(mod => {
  // if there already is an Key named `mod.thematicArea` put the current name in it
  if(themes[mod.thematicArea]) themes[mod.thematicArea].push(mod.name);
  // else create that property and make it an array containing the mod.name
  else themes[mod.thematicArea] = [mod.name];
});

themes = Object.keys(themes).map(key => {
  return (
    <div>
    <h3>{key}</h3>
    <ul>
    {themes[key].map(name => <li>{name}</li>)}
    </ul>
    </div>
  )
});

ReactDOM.render(
  themes,
  document.getElementById('root')
);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>