JavaScript：从 JSON 数组构建自定义数据树答案

【问题标题】：JavaScript: Build custom data tree from JSON arrayJavaScript：从 JSON 数组构建自定义数据树
【发布时间】：2019-12-24 05:37:38
【问题描述】：

我正在尝试使用 JavaScript 从输入数据的平面数组创建自定义 JSON 树结构。

我的输入数组中没有任何“parentId”类型的数据，但是我确实有每个项目的“级别”。以下代码是我输入数据的示例，具有所需的树结构。我认为这是可行的，但我不知道如何在 JavaScript 中实现：

var arr=[
{
     "text":"text1",
     "level"  :"1",
 },
{
     "text":"text2",
     "level"  :"2",
 },
{
     "text":"text3",
     "level"  :"3",
 },
{
     "text":"text4",
     "level"  :"3",
 },
{
     "text":"text5",
     "level"  :"2",
 },
{
     "text":"text6",
     "level"  :"1",
 }
];

我需要将arr转换成这个树形结构：

  {
    "text": "Text 1",
    "level"  :"1",
    "nodes": [
      {
        "text": "Text 2",
        "level"  :"2",
        "nodes": [
          {
            "text": "Text 3",
            "level"  :"3",
          },
          {
            "text": "Text 4",
            "level"  :"3",
          }
        ]
      },
      {
        "text": "Text 5",
        "level"  :"2",
      }
    ]
  },
  {
    "text": "Text 6",
    "level"  :"1"

  }
];

【问题讨论】：

hmm..您的示例不完整..如果在文本 6 之后，您有另一个级别 2，例如文本 7 级别 2，文本 7 会转到文本 1 的节点还是会去到节点文本 6？或者，如果你在文本 6 之后有级别 3，比如文本 8 级别 3，文本 8 应该去哪个节点？
您好，请查看“如何提问指南”(stackoverflow.com/help/how-to-ask)。另外，请提供有关如何生成此 JSON 的基本信息，因为它应该在那里完成。

标签： javascript

【解决方案1】：

一种方法是在您首先使用两个处理阶段构建树：

将data中的输入项按级别排序，升序排序。此预处理简化了下一步的树构造，允许从根开始按顺序将节点插入树中。
“减少”排序后的数组项，构建一个结构化的树，每次减少迭代。树构造基于“找到”当前正在迭代的item 应插入的适当“节点数组”。这种分类总结为三个主要案例：
- 不存在树，所以返回当前item作为正在构建的树的起始根节点
- 在树中找到与当前正在迭代的item 直接匹配的nodes 项（并将item 插入到该nodes 数组中）
- 或者，找到一个 nodes 数组，它是被迭代的当前 item 的“父”数组（并将 item 插入到该父数组 nodes 数组中

在代码中，这可以表示为以下内容（有关详细信息，请参阅文档）：

const data=[{"text":"text1","level":"1"},{"text":"text2","level":"2"},{"text":"text3","level":"3"},{"text":"text4","level":"3"},{"text":"text5","level":"2"},{"text":"text6","level":"1"}];

const result = data
  /* Sort items in input array by level */
  .sort((i, j) => i.level - j.level)
  /* "Reduce" the array to a structured tree */
  .reduce((root, item) => {

    /* If current root array empty, start tree with first item array */
    if (root.length === 0) {
      return [item];
    }

    /* This is a "search" where we look down the tree (from root) for a
    "node" array that the current "item" should be inserted into 
    */
    for (var nodes = root;;) {

      const [first] = nodes;

      if (first.level === item.level) {
        /* 
        If level of current nodes array matches item level, add item to
        node of the tree 
        */
        nodes.push(item);
        break;

      } else if (first.level == item.level - 1) {
        /* 
        If level of current nodes is parent level of item, initialise parent
        level nodes and add item to parent nodes
        */
        first.nodes = Array.isArray(first.nodes) ? first.nodes : []
        first.nodes.push(item);
        break;

      } else {
        /*
        Iterate down the tree to next/lower level of children nodes */
        nodes = first.nodes
        if (!Array.isArray(nodes)) {
          break;
        }
      }
    }

    return root;

  }, []);

console.log(result);

希望有帮助！

【讨论】：

【解决方案2】：

这正是我认为您需要的，这只是一个不完整的示例。所以更好地研究如何：D。希望这会有所帮助。

提示：创建用于成型节点的方法/模板。

var obj = {};
obj.text = "Text 1";
obj.level = "1";

var nodes = [  { "text":"Text 2", "level":"2" }, { "text":"Text 5", "level":"2" } ];
obj.nodes = nodes;
console.log(obj);

【讨论】：