构建树视图 Object

Question

我想在 React Native 中为 树视图 构造一个数组 Object。

Realm DB returns 以下行，因为它们具有 parent-child 关系 :

{
   "0":{
      "ID":3,
      "name":"KITCHEN",
      "parentID":2,
      "createdBY":null,
      "createdAT":null
   },
   "1":{
      "ID":4,
      "name":"BATHROOM",
      "parentID":2,
      "createdBY":null,
      "createdAT":null
   },
   "2":{
      "ID":5,
      "name":"OIL",
      "parentID":3,
      "createdBY":null,
      "createdAT":null
   },
   "3":{
      "ID":6,
      "name":"LIQUID",
      "parentID":5,
      "createdBY":null,
      "createdAT":null
   },
   "4":{
      "ID":7,
      "name":"SOLID",
      "parentID":5,
      "createdBY":null,
      "createdAT":null
   }
}

Object 应该是这样的：

 const treeData = [
      {
        key: 3,
        label: 'KITCHEN',
        nodes: [
          {
            key: '5',
            label: 'OIL',
            nodes: [
              {
                key: '6',
                label: 'LIQUID',
              },
              {
                key: '7',
                label: 'SOLID',
              },
            ],
          },
        ],
      },
      {
        key: 4,
        label: 'BATHROOM',
      },
    ];

我的尝试是遍历所有行并获取它们的 IDs 然后在嵌套循环中检查 parentID 和 ID 如果发生任何匹配则将该节点添加到另一个object。

这只会给我任何 parent 的 child/s。

for (var i = 0; i < rows.length; i++) {
      let tempID = rows[i].ID
      treeData = treeData.concat(rows[i])
      for (var j = 0; j < rows.length; j++) {
        let tempParentID = rows[j].parentID
        if (tempID == tempParentID) {
          subCategoryJson = subCategoryJson.concat(rows[j])
        }
      }
    }

问题是我真的不确定如何构造上面的数组Object。

PS。我正在尝试使用以下节点模块： https://www.npmjs.com/package/react-simple-tree-menu

Answer 1

我会先循环并创建一个查找对象，以便轻松引用父对象并检查父对象是否存在。

之后我会再次遍历数据并检查它是否有父节点，如果有，添加一个节点属性并将元素推送到它。如果不添加到父节点。

const data = {
  "0": {
    "ID": 3,
    "name": "KITCHEN",
    "parentID": 2,
    "createdBY": null,
    "createdAT": null
  },
  "1": {
    "ID": 4,
    "name": "BATHROOM",
    "parentID": 2,
    "createdBY": null,
    "createdAT": null
  },
  "2": {
    "ID": 5,
    "name": "OIL",
    "parentID": 3,
    "createdBY": null,
    "createdAT": null
  },
  "3": {
    "ID": 6,
    "name": "LIQUID",
    "parentID": 5,
    "createdBY": null,
    "createdAT": null
  },
  "4": {
    "ID": 7,
    "name": "SOLID",
    "parentID": 5,
    "createdBY": null,
    "createdAT": null
  }
}
const values = Object.values(data)
const lookup = values.reduce((obj, entry) => ({
  [entry.ID]: entry,
  ...obj
}), {})

const result = values.reduce((arr, entry) => {
  const parent = lookup[entry.parentID]
  if (parent) {
    parent.nodes = parent.nodes || []
    parent.nodes.push(entry)
  } else {
    arr.push(entry)
  }
  return arr
}, [])
console.log(result)

Answer 2

您可以存储键并过滤结果的父节点。

var data = { 0: { ID: 3, name: "KITCHEN", parentID: 2, createdBY: null, createdAT: null }, 1: { ID: 4, name: "BATHROOM", parentID: 2, createdBY: null, createdAT: null }, 2: { ID: 5, name: "OIL", parentID: 3, createdBY: null, createdAT: null }, 3: { ID: 6, name: "LIQUID", parentID: 5, createdBY: null, createdAT: null }, 4: { ID: 7, name: "SOLID", parentID: 5, createdBY: null, createdAT: null } },
    tree = function (data) {
        var t = {},
            parents = {};

        Object.values(data).forEach(({ ID: key, name: label, parentID }) => {
            Object.assign(t[key] = t[key] || {}, { key, label });
            t[parentID] = t[parentID] || { };
            t[parentID].nodes = t[parentID].nodes || [];
            t[parentID].nodes.push(t[key]);
            parents[key] = true;
        });
        return Object
            .keys(t)
            .filter(k => !parents[k])
            .flatMap(k => t[k].nodes);
    }(data);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

构建树视图 Object

Constructing Tree View Object

javascript

treeview

react-native