带有子对象的 Javascript 递归 JSON 数组

Question

有没有一种方法可以在不对嵌套子项进行 for 循环的情况下递归以下 JSON？

我的递归函数一定是遗漏了一个案例，因为它没有返回所有内容。

iterateTree(node, children) {
    console.log(node.name)

    if(node.children.length == 0) {
      return;
    }

    for(var i = 0; i < children.length; i++) {
      var child_node = children[i];

      return this.iterateTree(child_node, child_node.children);
    }
  }

for(var i = 0; i < sample.length; i++) {
      var node = sample[i];
      this.iterateTree(node, node.children);
    }

var sample = [
  {
    "name": "hello world",
    "children": [
      {
        "name": "fruits",
        "children": []
      },
      {
        "name": "vegetables",
        "children": []
      },
      {
        "name": "meats",
        "children": [
          {
            "name": "pork",
            "children": []
          },
          {
            "name": "beef",
            "children": []
          },
          {
            "name": "chicken",
            "children": [
              {
                "name": "organic",
                "children": []
              },
              {
                "name": "farm raised",
                "children": []
              }
            ]
          },
        ]
      }
    ]
  },
  {
    "name": "second folder",
    "children": []
  },
  {
    "name": "third folder",
    "children": [
      {
        "name": "breads",
        "children": []
      },
      {
        "name": "coffee",
        "children": [
          {
            "name": "latte",
            "children": []
          },
          {
            "name": "cappucino",
            "children": []
          },
          {
            "name": "mocha",
            "children": []
          },
        ]
      },
    ]
  }
]

旨在实现如下输出(类似于文件结构)

hello world
-fruits
-vegetables
-meats 
--pork
--beef
--chicken
---organic
---farm raised
second folder
third folder
-breads
-coffee
--latte
--cappucino
--mocha

Answer 1

您可以使用 reduce 方法创建递归函数来遍历嵌套数据结构，返回数组，然后对该数组使用 join 方法。

var sample = [{"name":"hello world","children":[{"name":"fruits","children":[]},{"name":"vegetables","children":[]},{"name":"meats","children":[{"name":"pork","children":[]},{"name":"beef","children":[]},{"name":"chicken","children":[{"name":"organic","children":[]},{"name":"farm raised","children":[]}]}]}]},{"name":"second folder","children":[]},{"name":"third folder","children":[{"name":"breads","children":[]},{"name":"coffee","children":[{"name":"latte","children":[]},{"name":"cappucino","children":[]},{"name":"mocha","children":[]}]}]}]

function tree(data, prev = '') {
  return data.reduce((r, e) => {
    r.push(prev + e.name)
    if (e.children.length) r.push(...tree(e.children, prev + '-'));
    return r;
  }, [])
}

const result = tree(sample).join('\n')
console.log(result)

要在 HTML 中创建相同的结构，您可以改用 forEach 方法。

var sample = [{"name":"hello world","children":[{"name":"fruits","children":[]},{"name":"vegetables","children":[]},{"name":"meats","children":[{"name":"pork","children":[]},{"name":"beef","children":[]},{"name":"chicken","children":[{"name":"organic","children":[]},{"name":"farm raised","children":[]}]}]}]},{"name":"second folder","children":[]},{"name":"third folder","children":[{"name":"breads","children":[]},{"name":"coffee","children":[{"name":"latte","children":[]},{"name":"cappucino","children":[]},{"name":"mocha","children":[]}]}]}]

function tree(data, parent) {
  const ul = document.createElement('ul');
  data.forEach(el => {
    const li = document.createElement('li');
    li.textContent = el.name;
    ul.appendChild(li);
    if (el.children.length) {
      tree(el.children, li)
    }
  })
  parent.appendChild(ul)
}

const parent = document.getElementById('root')
tree(sample, parent)

<div id="root"></div>