根据Javascript中的节点号将平面列表数组转换为树视图数组 [英] Convert flat list array to tree view array based on node number in Javascript

问题描述

我想根据Javascript中的节点号将平面列表数组转换为树视图数组.节点号代表子数组元素.例如节点号1.1代表元素"A"的子元素.节点号1.1.1和节点号1.1.1代表元素"B"的子元素.等等.

I want to convert flat list array to tree view array based on node number in Javascript. Node number represent child array element. e.g. nodenumber 1.1 represent the children of element "A" and nodenumber 1.1.1 represent the children of element "B" and so on.

输入

[
  {
    "name": "A",
    "nodeNumber": "1"
  },
  {
    "name": "B",
    "nodeNumber": "1.1"
  },
  {
    "name": "C",
    "nodeNumber": "1.1.1"
  },
  {
    "name": "D",
    "nodeNumber": "1.2"
  },
  {
    "name": "E",
    "nodeNumber": "1.2.1"
  },
  {
    "name": "F",
    "nodeNumber": "1.2.2"
  }
]

预期产量

{
    "name": "A",
    "nodeNumber": "1",
    "children" :[
      {
        "name": "B",
        "nodeNumber": "1.1",
        "children" :[
          {
            "name": "C",
            "nodeNumber": "1.1.1"
          }
        ]
      },
      {
        "name": "D",
        "nodeNumber": "1.2",
        "children" :[
          {
            "name": "E",
            "nodeNumber": "1.2.1"
          },
          {
            "name": "F",
            "nodeNumber": "1.2.2"
          }
        ]
      }
    ]
  }

没有层次结构限制.

我尝试使每个元素的键都唯一，并尝试进行下一步，但是我被困在那里:

I have tried to make unique as key for each element and tried to go next step but I got stuck there:

var res = [];
var flatList = [];
input.forEach(loopContent);
function loopContent(item,index,arr) {
    let node = item.nodeNumber.split('.').join('_');
    item['flat_id'] = node;
    res[node] = item; flatList.push(node);
} 

请帮助我

推荐答案

一个学习可重用模块和相互递归的绝好机会.此答案中的此解决方案无需修改另一个答案.

A great opportunity to learn about reusable modules and mutual recursion. This solution in this answer solves your specific problem without any modification of the modules written in another answer.

在开始之前，我们必须首先提供一个针对您的问题的parent函数.

Before we get started, we must first supply a parent function that is unique to your problem.

const parent = (str = "") =>
{ const pos = str.lastIndexOf(".")
  return pos === -1
    ? null
    : str.substr(0, pos)
}

parent("1.2.2")  // => "1.2"
parent("1.2")    // => "1"
parent("1")      //  => null

现在让我们来构建我们的树-

Now let's build our tree -

// Main.js
import { tree } from './Tree'

const input =
  [ { name: "A", nodeNumber: "1" }, { name: "B", nodeNumber: "1.1" }, { name: "C", nodeNumber: "1.1.1" }, { name: "D", nodeNumber: "1.2" }, { name: "E", nodeNumber: "1.2.1" }, { name: "F", nodeNumber: "1.2.2" } ]

const result =
  tree
    ( input                           // <- array of nodes
    , node => parent(node.nodeNumber) // <- foreign key
    , (node, children) =>             // <- node reconstructor function
        ({ ...node, children: children(node.nodeNumber) }) // <- primary key
    )

console.log(JSON.stringify(result, null, 2))

输出-

[
  {
    "name": "A",
    "nodeNumber": "1",
    "children": [
      {
        "name": "B",
        "nodeNumber": "1.1",
        "children": [
          {
            "name": "C",
            "nodeNumber": "1.1.1",
            "children": []
          }
        ]
      },
      {
        "name": "D",
        "nodeNumber": "1.2",
        "children": [
          {
            "name": "E",
            "nodeNumber": "1.2.1",
            "children": []
          },
          {
            "name": "F",
            "nodeNumber": "1.2.2",
            "children": []
          }
        ]
      }
    ]
  }
]

---

就是这样.为了使本文更加完整，我将提供Tree模块的副本-

---

And that's it. To make this post complete, I will include a copy of the Tree module -

// Tree.js
import { index } from './Index'

const empty =
  {}

function tree (all, indexer, maker, root = null)
{ const cache =
    index(all, indexer)

  const many = (all = []) =>
    all.map(x => one(x))
                             // zero knowledge of forum object shape
  const one = (single) =>
    maker(single, next => many(cache.get(next)))

  return many(cache.get(root))
}

export { empty, tree } // <-- public interface

和Index模块依赖性-

// Index.js
const empty = _ =>
  new Map

const update = (r, k, t) =>
  r.set(k, t(r.get(k)))

const append = (r, k, v) =>
  update(r, k, (all = []) => [...all, v])

const index = (all = [], indexer) =>
  all.reduce
      ( (r, v) => append(r, indexer(v), v) // zero knowledge of v shape
      , empty()
      )

export { empty, index, append } // <-- public interface

为获得更多见解，我建议您阅读原始问题与解答.

For additional insight, I encourage you to read the original Q&A.

这篇关于根据Javascript中的节点号将平面列表数组转换为树视图数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！