作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何循环嵌套数组并为每个级别插入 id 和parentId?
这就是我所拥有的:
{
"locations": [
{
"name": "Europe",
"children": [
{
"name": "Denmark",
"children": [
{
"name": "Copenhagen",
"population": [
{
"people": "602481"
}
]
}
]
},
{
"name": "South Europe",
"children": [
{
"name": "Spain",
"children": [
{
"name": "Madrid",
"population": [
{
"people": "6550000"
}
]
},
{
"name": "Barcelona",
"population": [
{
"people": "5515000"
}
]
}
]
}
]
}
]
},
{
"name": "Asia",
"children": [
{
"name": "East Asia",
"children": [
{
"name": "China",
"children": [
{
"name": "Beijing",
"population": [
{
"people": "21540000"
}
]
}
]
}
]
}
]
}
]
}
这就是我想要的:
{
"locations": [
{
"id": "AP1",
"name": "Europe",
"children": [
{
"id": "AP1.1",
"parentId": "AP1",
"name": "Denmark",
"children": [
{
"id": "AN1",
"parentId": "AP1.1",
"name": "Copenhagen",
"population": [
{
"people": "602481"
}
]
}
]
},
{
"id": "AP1.2",
"parentId": "AP1",
"name": "South Europe",
"children": [
{
"id": "AP1.2.1",
"parentId": "AP1.2",
"name": "Spain",
"children": [
{
"id": "AN2",
"parentId": "AP1.2.1",
"name": "Madrid",
"population": [
{
"people": "6550000"
}
]
},
{
"id": "AN3",
"parentId": "AP1.2.1",
"name": "Barcelona",
"population": [
{
"people": "5515000"
}
]
}
]
}
]
}
]
},
{
"id": "AP2",
"name": "Asia",
"children": [
{
"id": "AP2.1",
"parentId": "AP2",
"name": "East Asia",
"children": [
{
"id": "AP2.1.1",
"parentId": "AP2.1",
"name": "China",
"children": [
{
"id": "AN4",
"parentId": "AP2.1.1",
"name": "Beijing",
"population": [
{
"people": "21540000"
}
]
}
]
}
]
}
]
}
]
}
我对 JavaScript 比较陌生,我只知道如何使用基本的 for 循环来循环第一个数组,即欧洲和亚洲。我实际上如何在层次结构中一直循环?
最佳答案
你可以这样做:
const obj = {
"locations": [{
"name": "Europe",
"children": [{
"name": "Denmark",
"children": [{
"name": "Copenhagen",
"population": [{
"people": "602481"
}]
}]
},
{
"name": "South Europe",
"children": [{
"name": "Spain",
"children": [{
"name": "Madrid",
"population": [{
"people": "6550000"
}]
},
{
"name": "Barcelona",
"population": [{
"people": "5515000"
}]
}
]
}]
}
]
},
{
"name": "Asia",
"children": [{
"name": "East Asia",
"children": [{
"name": "China",
"children": [{
"name": "Beijing",
"population": [{
"people": "21540000"
}]
}]
}]
}]
}
]
}
function recur(arr, prevId = undefined) {
let countId = 0;
arr.forEach(item => {
countId++;
if (prevId) {
item.id = prevId + '.' + countId;
item.parentId = prevId;
} else {
item.id = countId.toString();
}
if ('children' in item && item.children.length > 0) {
recur(item.children, item.id);
}
});
}
recur(obj.locations);
document.getElementById('output').innerHTML = JSON.stringify(obj, undefined, 4);
<pre id="output"></pre>
您需要递归的说法是不正确的。您也可以迭代地执行此操作,如果您想了解这一点,您可能想从这里开始:Tree Traversal on Wikipedia .
<小时/>编辑:只是注意到应该有一个关于 ids 的命名方案,但由于您没有指定它是什么,我无法提供帮助。基本上,您需要使用条件来扩展此函数,以确定 id 中的实际字符串。
关于javascript - 如何循环遍历嵌套数组并为每个级别插入 id 和parentId?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60568073/
我是一名优秀的程序员,十分优秀!