渲染嵌套对象

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

首先创建一个对象，其键为tmp/cache/persistent，其值为thematicArea的数组，然后以所需格式返回：

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')
);

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);