渲染嵌套对象

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中，我试图在组件中使用LoDash - > thematicArea.jsx希望它能帮助我; ）

Answer 1

首先制作一个对象，其中的键是thematicAreas，其值是names的数组，之后只需返回所需的格式：

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>

Answer 2

您可以使用Array#reduce进行分组操作。

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"
    ]
  }
]

const grouped = modules.reduce((groups, module) => {
    if (!groups[module.thematicArea]) {
        groups[module.thematicArea] = [];
    }
    groups[module.thematicArea].push(module.name);
    return groups;
}, {});

console.log(grouped);