基于 JSON 值不匹配的 JSX 的条件呈现

Question

我有以下JSON：

{
title: "Title 1",
submenu: [
{
col: 1,
title: "Sub Title 1",
},
{
col: 1,
title: "Sub Title 2",
},
{
col: 2,
title: "Sub Title 3",
},
}

而且我每次都尝试显示不同的内容

col

值更改

这是我到目前为止所拥有的：

{props.siteLinks.map((item, key) => (
{item.title}
{item.submenu.map((subitem, key) => {
return (
<div>
<ul>
<li key={subitem.title}>
{subitem.col}
{subitem.title}
</li>
</ul>
</div>
)
})}
))}

我想改变

{subitem.col}

因此，当值更改为例如 col：1 到 col：2 时，会插入一个新的div

所需的输出为：

<div>
<ul>
<li>
<div>Column 1</div>
Sub title 1
Sub title 2
<div>Column 2</div>
Sub title 3
</li>
</ul>
</div>

Answer 1

听起来你想在 col 上做一个小组。 查看此 URL 以获取有关分组的更多信息

https://www.consolelog.io/group-by-in-javascript/

Answer 2

给定这个json：

{
title: "Title 1",
submenu: [
{
col: 1,
title: "Sub Title 1",
},
{
col: 1,
title: "Sub Title 2",
},
{
col: 2,
title: "Sub Title 3",
},
} 

Mozilla 文档

function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
const distinctVals = groupBy(subitem, 'col');

生产

distinctVals =
{
1: [
{
col: 1,
title: "Sub Title 1",
},
{
col: 1,
title: "Sub Title 2",
}
],
2: [
{
col: 1,
title: "Sub Title 1",
}
]
}

所以现在你可以使用它来映射列：

props.siteLinks.map((item, key) => {
return (
<div>
{
distinctVals.map((val, key) => {
return (
<div>
<ul>
{val.map((v, ind) => {
<li key={ind}>
{val.col}
{val.title}
</li>
})
}
</ul>
</div>
)
})
}
</div>
);
});