javascript - 递归循环遍历对象的嵌套数组以编写嵌套列表
问题描述
给定一个嵌套的对象数组,我试图写一个嵌套的无序列表。
数组本身是有组织的,因此每个新的子属性都会启动一个新的对象数组。该函数需要能够支持 n 级深度。
我当前的解决方案可以递归地编写我现在需要的所有属性,但是在错误的 <ul> 处附加了 <li> 标签。
我认为这是因为:
var lowUL = targetUL.querySelector('ul');
我在递归基本案例中也使用它来附加 < li> 。它只选择它找到的第一个 <ul> 标记,而不是在 for 循环中从该迭代中动态创建的 <ul> 标记。
// DATA
const org1_depts = [
{
name: 'accounting',
children: [
{ name: 'accounting payable', children: [] },
{ name: 'accounting receivable', children: [] },
],
},
{
name: 'finance',
children: [],
},
]
const org2_depts = [
{
name: 'accounting',
children: [
{ name: 'accounting payable', children: [] },
{
name: 'accounting receivable',
children: [{ name: 'cash', children: [] }, { name: 'check', children: [] }],
},
],
},
{
name: 'finance',
children: [{ name: 'investment', children: [] }],
},
]
// FUNCTION
function listOrg(orgData,targetUL) {
var i;
for (i = 0; i < orgData.length; i++) {
if (orgData[i].hasOwnProperty('name')) {
// Take out the text from the .name property
var nameText = document.createTextNode(orgData[i].name);
// Define a new <li> tag
var newLI = document.createElement('li');
// Append text to new <li> tage - newLI
newLI.appendChild(nameText);
// Append element to <ul> tag
targetUL.appendChild(newLI);
}
if (orgData[i].hasOwnProperty('children')) {
// Define new <ul> tag
var newUL = document.createElement('ul');
// Append new <ul> tag
var lowUl = targetUL.appendChild(newUL);
// Select new lower level <ul> tag
var lowUL = targetUL.querySelector('ul');
// Recurse
listOrg(orgData[i].children,lowUL);
}
}
}
// CALL FUNCTION
listOrg(org1_depts,document.getElementById("org1"));
listOrg(org2_depts,document.getElementById("org2"));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id='org1'>
Organization 1
</ul>
<ul id='org2'>
Organization 2
</ul>
</body>
</html>
在“应收账款”中的子名称属性上方被放置在“应付账款”中,这是错误的。
解决方案
当您递归调用该listOrg
函数时,您应该将newUL
变量作为参数而不是lowUL
. listOrg(orgData[i].children,newUL)
这将针对新创建的 ul,您无需使用querySelector
// DATA
const org1_depts = [
{
name: 'accounting',
children: [
{ name: 'accounting payable', children: [] },
{ name: 'accounting receivable', children: [] },
],
},
{
name: 'finance',
children: [],
},
]
const org2_depts = [
{
name: 'accounting',
children: [
{ name: 'accounting payable', children: [] },
{
name: 'accounting receivable',
children: [{ name: 'cash', children: [] }, { name: 'check', children: [] }],
},
],
},
{
name: 'finance',
children: [{ name: 'investment', children: [] }],
},
]
// FUNCTION
function listOrg(orgData,targetUL) {
var i;
for (i = 0; i < orgData.length; i++) {
if (orgData[i].hasOwnProperty('name')) {
// Take out the text from the .name property
var nameText = document.createTextNode(orgData[i].name);
// Define a new <li> tag
var newLI = document.createElement('li');
// Append text to new <li> tage - newLI
newLI.appendChild(nameText);
// Append element to <ul> tag
targetUL.appendChild(newLI);
}
if (orgData[i].hasOwnProperty('children')) {
// Define new <ul> tag
var newUL = document.createElement('ul');
// Append new <ul> tag
var lowUl = targetUL.appendChild(newUL);
// Select new lower level <ul> tag
var lowUL = targetUL.querySelector('ul');
// Recurse
listOrg(orgData[i].children,newUL );
}
}
}
// CALL FUNCTION
listOrg(org1_depts,document.getElementById("org1"));
listOrg(org2_depts,document.getElementById("org2"));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id='org1'>
Organization 1
</ul>
<ul id='org2'>
Organization 2
</ul>
</body>
</html>
推荐阅读
- python-3.x - 将大于 A 的值替换为 B,将小于 C 的值替换为 D
- c# - 在 C# 中有效电子邮件地址的域部分添加“test-”
- swiftui - 如何在 SwiftUI NavigationButton 中包装文本?
- sql - BigQuery/我无法正确使用“in”子句
- r - 使用赋值运算符在 R 的 for 循环中创建多个 df
- c# - MVC 在使用 API 调用时允许 XSS 攻击
- python - 装饰器停止自动运行
- c# - Asp.Net Core Identity 获取整数用户 ID
- c# - 使用静态代码为应用创建 Web API
- apache - 如何使用 Apache mod_mellon 模块签署 AuthnRequest