Question

我很难尝试根据类似下面的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 btw！

Answer 1

这样的事情（使用两个助手进行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>"

感谢zerkms进行更正。

Answer 2

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

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

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

Javascript递归包装儿童（俄罗斯套娃）

2 个答案: