javascript - 映射 Javascript 数组并将其中的对象转换为特定格式?
问题描述
我有一个对象数组
const mainArray = [{
name: 'main name',
id: 'main id',
parent: [{
name: 'parent name',
id: '1'
}],
child: [{
name: 'child name',
id: 'child id'
}]
}, {
name: 'main name 2',
id: 'main id 2',
parent: [{
name: 'parent name',
id: '1'
}],
child: [{
name: 'child name 2',
id: 'child id 2'
}]
},
{
name: 'main name 3',
id: 'main id 3',
parent: [{
name: 'parent name something else',
id: '2'
}],
child: [{
name: 'child name 3',
id: 'child id 3'
}]
}
]
我需要把它带到这个表格
const resultArray = [{
key: 'main',
title: 'main name',
}, {
key: 'parent',
title: 'parent name'
}, {
key: 'child',
title: 'child name'
}]
到目前为止我得到了这个
if (mainArray) {
mainArray.map((main) => {
if (main.child && main.child.length) {
if (main.parent && main.parent.length) {
main.parent.map((item) => {
data.push({
key: 'parent',
title: item.name
});
});
}
data.push({
key: 'main',
title: main.name
});
main.child.map((item) => {
data.push({
key: 'child',
title: item.name
});
});
}
});
}
然后我用它data array
来显示一个表格,它看起来像这样
我的问题是 - 两个mains
可以不同但有相同的parent
(父母有相同的ids
)然后我不需要将父母两次添加到数组中,我需要它像这样显示
所以我正在寻找一种方法,如果两个parents
对象具有相同id
的属性,可以将它们合并在一起,以便在最终数组中只有一个对象,并且该父对象的 the 和 the 被卡在一个parent
而不是两个相同的对象上main
child
parent
这里是jsfiddle的链接
我可以使用lodash
解决方案
您可以首先按父级分组并返回一个对象,其中每个键都是父级名称,然后您可以从该对象创建一个数组。
const mainArray = [{"name":"main name","id":"main id","parent":[{"name":"parent name","id":"1"}],"child":[{"name":"child name","id":"child id"}]},{"name":"main name 2","id":"main id 2","parent":[{"name":"parent name","id":"1"}],"child":[{"name":"child name 2","id":"child id 2"}]},{"name":"main name 3","id":"main id 3","parent":[{"name":"parent name something else","id":"2"}],"child":[{"name":"child name 3","id":"child id 3"}]}]
function children(rest, child) {
const result = [{
key: 'main',
title: rest.name
}];
result.push(...child.map(({
name
}) => ({
key: 'child',
title: name
})))
return result;
}
const groupByParent = mainArray.reduce((r, {
parent,
child,
...rest
}) => {
parent.forEach(p => {
if (!r[p.name]) {
r[p.name] = [{
key: 'parent',
title: p.name
},
...children(rest, child)
]
} else {
r[p.name].push(...children(rest, child));
}
})
return r;
}, {})
const result = Object.values(groupByParent).flat()
console.log(result)
推荐阅读
- firebase - Firebase 身份验证 Google 登录以仅允许特定的 google 工作区帐户
- linux - X11 监听嵌套窗口的光标样式更新(chrome)
- c++ - GetProcAddress 在 DLL 中找不到函数
- javascript - innerText 导致 [object HTMLLIElement] 而不是 li 文本
- html - 我怎样才能让我的网站响应?我正在使用 glitch.com
- java - 如何使用 postman 在 Java 中传递 JSONObject 类型值
- google-chrome - chrome/firefox 如何使用 webaudio 生成正弦波?
- javascript - 我的购物车中未显示多个项目 [ReactJS]
- matlab - 从 Google Colab 调用 MATLAB
- windows - 在 Windows 10 的 Windows 可选功能中找不到无线显示选项