递归循环遍历对象的嵌套数组以编写嵌套列表答案

【问题标题】：Recursive loop through nested array of objects to write nested list递归循环遍历对象的嵌套数组以编写嵌套列表
【发布时间】：2023-04-01 17:40:01
【问题描述】：

给定一个嵌套的对象数组，我试图写入一个嵌套的无序列表。

数组本身是有组织的，因此每个新的子属性都会启动一个新的对象数组。该函数需要能够支持n级深度。

我目前的解决方案可以递归写出我现在需要的所有属性，但是在错误的

标签。

我认为这是因为：

  var lowUL = targetUL.querySelector('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>

“应收帐款”中的子名称属性被放置在“应付帐款”中，这是错误的。

【问题讨论】：

标签： javascript html dom

【解决方案1】：

当您递归调用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>

【讨论】：

为什么会成功？它不会只是将
标签附加到根