Javascript递归包装儿童（matryoshka娃娃）

我很难根据类似于下面的json文档生成文本文档

[{
    "title": "item 1",
    "nodes": [{
        "title": "item 1.1"
        "nodes": [{
            "title": "item 1.1.1"
        }, {
            "title": "item 1.1.2"
        }, {
            "title": "item 1.1.3",
            "nodes": [{
                "title": "item 1.1.3.1"
            }, {
                "title": "item 1.1.3.2"
            }, {
                "title": "item 1.1.3.3"
            }]
        }]
    }]
}]

---

我有一个简单的递归函数，可以很好地工作，但我想生成类似Matryoshka玩偶的东西：

<branch title="item 1">
    <branch title="item 1.1">
        <item title="item 1.1.1"></item-end>
        <item title="item 1.1.2"></item-end>
        <branch title="1.1.3">
            <item title="1.1.3.1"></item-end>
            <item title="1.1.3.2"></item-end>
            <item title="1.1.3.3"></item-end>
        <branch-end>
    <branch-end>
<branch-end>

每个孩子都应该由父母用适当的缩进包装

---

有没有办法解决这个问题？顺便说一句，我正在使用nodejs

类似这样的内容如何（使用两个帮助程序生成html）：

助手。

function pad(depth) {return '--'.repeat(depth);}

function makeBranch(title, body, depth) {
  return pad(depth) + '<branch title="'+ title + '">' +
    body + pad(depth) + '<branch-end>';
}

function makeItem(title, depth) {
  return pad(depth) + '<item title="'+ title + '"></item-end>';
}

function gen(tree, depth) {
  if (!tree.nodes) {
    return makeItem(tree.title, depth);
  } else {
    return makeBranch(tree.title, tree.nodes.reduce(function(str, branch) {
      return str + gen(branch, depth + 1);
    }, ''), depth);
  }
}

// Pass the root of the tree with depth = 0
gen(tree[0], 0);

//=> Output (formatted here for easier viewing):
"<branch title="item 1">
 --<branch title="item 1.1">
 ----<item title="item 1.1.1"></item-end>
 ----<item title="item 1.1.2"></item-end>
 ----<branch title="item 1.1.3">
 ------<item title="item 1.1.3.1"></item-end>
 ------<item title="item 1.1.3.2"></item-end>
 ------<item title="item 1.1.3.3"></item-end>
 ----<branch-end>
 --<branch-end>
 <branch-end>"

用法。

function pad(depth) {return '--'.repeat(depth);}

function makeBranch(title, body, depth) {
  return pad(depth) + '<branch title="'+ title + '">' +
    body + pad(depth) + '<branch-end>';
}

function makeItem(title, depth) {
  return pad(depth) + '<item title="'+ title + '"></item-end>';
}

function gen(tree, depth) {
  if (!tree.nodes) {
    return makeItem(tree.title, depth);
  } else {
    return makeBranch(tree.title, tree.nodes.reduce(function(str, branch) {
      return str + gen(branch, depth + 1);
    }, ''), depth);
  }
}

// Pass the root of the tree with depth = 0
gen(tree[0], 0);

//=> Output (formatted here for easier viewing):
"<branch title="item 1">
 --<branch title="item 1.1">
 ----<item title="item 1.1.1"></item-end>
 ----<item title="item 1.1.2"></item-end>
 ----<branch title="item 1.1.3">
 ------<item title="item 1.1.3.1"></item-end>
 ------<item title="item 1.1.3.2"></item-end>
 ------<item title="item 1.1.3.3"></item-end>
 ----<branch-end>
 --<branch-end>
 <branch-end>"

//传递深度为0的树的根
gen（tree[0]，0）；
//=>输出（此处格式化以便于查看）：
"
--
----
----
----
------
------
------
----
--
"

---

谢谢你的更正。

在我的手机上，所以只是想一想，没有代码

关键是将树结构展平为一个数组，其中每个元素都有一个额外的缩进

---

您可以轻松地使用递归展平树。然后剩下的就是渲染数组

“关于如何解决这个问题有什么想法吗？”——你使用递归遍历树，并在前进过程中放入适当的缩进。“我有一个简单的递归函数，可以很好地工作”——“很好”与你真正需要的有多大的不同？只需打印一行，每个节点都可以很好地工作；然而，当我想让它被需要生成的东西包裹起来时，我就被卡住了。我甚至不知道当它真的很深嵌套时如何跟踪深度（用于缩进）。“我甚至不知道当它真的很深嵌套时如何跟踪深度”——将其作为函数参数传递。每次从函数本身调用函数时，将其传递为

depth+1

，我认为OP的困惑在于如何使用代码缩进。@zerkms感谢您的澄清。我完全忽略了这一点。是的+1，但我个人不会在

makeBranch

，

makeItem

项中添加填充-这不是他们的责任，他们根本不应该知道填充。