javascript - 比较键后如何将对象列表转换为嵌套对象
问题描述
目标:根据其父值将对象列表放入嵌套对象中。
在这里,我的json
数据如下:
"data": [
{
"id": "coding-825x500",
"source": {
"information": {
"fileid": "coding-825x500",
"filesize": 67340
},
**"dependent": "d1bc270d"**
}
},
{
"id": "d1bc270d",
"source": {
"information": {
"fileid": "d1bc270d",
"filesize": 193
},
"dependent": "parent"
}
},
{
"id": "1_iwPLQ",
"source": {
"information": {
"fileid": "1_iwPLQ",
"filesize": 580969
},
"dependent": "d1bc270d"
}
},
{
"id": "coding-825",
"source": {
"information": {
"fileid": "coding-825",
"filesize": 67340
},
"dependent": null
}
}
]
}
在每个对象中,我们都有id &dependent
{
"id": A
"dependent":parent
},
{
"id": B
"dependent":A
},
{
"id": C
"dependent":A
},
{
"id": D
"dependent":null
}
如果 id 等于从属 id,那么它应该是孩子,如果从属是父母,那么id == dependent
必须在此之下,如果从属为空,那么它也是没有孩子的父母。
下面我使用过滤器工作,但后来我不确定如何继续和创建嵌套对象。
let info = this.dynamic.data.filter((val)=>{
console.log(val.id, ":::" ,val.source.dependent);
})
Stackblitz => https://stackblitz.com/edit/angular-zvcea7
期望的输出:所有的子对象都应该在父对象之下,用于设置嵌套数据,表格可能像下面的格式。
{
"id": "A",
"dependent":parent
"nested":[
{
"id":"B",
"dependent":"A"
},
{
"id":"c",
"dependent":"A"
},
]
},
{
"id": "c",
"dependent":null
}
解决方案
您可以构建一棵树并用于具有'parent'
统一null
值的节点。
这种方法也适用于未排序的数据。
var data = [{ id: 'A', dependent: 'parent' }, { id: 'B', dependent: 'A' }, { id: 'D', dependent: null }, { id: 'C', dependent: 'A' }],
tree = function (data) {
var t = {};
data.forEach(o => {
var parent = o.dependent === 'parent' ? null : o.dependent;
Object.assign(t[o.id] = t[o.id] || {}, o);
t[parent] = t[parent] || {};
t[parent].nested = t[parent].nested || [];
t[parent].nested.push(t[o.id]);
});
return t.null.nested;
}(data);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
用第一个数据集。该dependent
属性嵌套在另一个对象中。
var data = [{ id: "coding-825x500", source: { information: { fileid: "coding-825x500", filesize: 67340 }, dependent: "d1bc270d" } }, { id: "d1bc270d", source: { information: { fileid: "d1bc270d", filesize: 193 }, dependent: "parent" } }, { id: "1_iwPLQ", source: { information: { fileid: "1_iwPLQ", filesize: 580969 }, dependent: "d1bc270d" } }, { id: "coding-825", source: { information: { fileid: "coding-825", filesize: 67340 }, dependent: null } }],
tree = function (data) {
var t = {};
data.forEach(o => {
var parent = o.source.dependent === 'parent' ? null : o.source.dependent;
Object.assign(t[o.id] = t[o.id] || {}, o);
t[parent] = t[parent] || { id: parent, source: null };
t[parent].nested = t[parent].nested || [];
t[parent].nested.push(t[o.id]);
});
return t.null.nested;
}(data);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
推荐阅读
- python - 使用 pipenv 管理 python 包的源代码
- c# - 注册 Api 控制器未保存散列密码
- python - 使用 pydantic json_decoders 解析不同的时间格式无法按预期工作
- php - Laravel PHP 中的时间表格式
- kubernetes - 如何在 Mac 的主目录中创建 .kube 目录?
- hook - 如果指令后有一些数据,CPU乱序执行是否会导致SIGILL崩溃?
- c# - 从 web api 使用 post 方法时出错
- vue.js - 从组件映射状态到 vuex 存储的动态状态对象
- node.js - 请求的资源上不存在“Access-Control-Allow-Oriign”标头 — localhost
- windows - 批处理字符串 +=?