javascript - 处理 JSON 以创建层次关系

Question

如果我问了一个愚蠢的问题，我很抱歉，但这让我很困扰，我还无法找到最好的解决方案。

我有一个如下所示的 JSON 数据:

{
    "my_data": [
        {
            "name": "bugs_db",
            "type": "database",
            "children": [
                {
                    "name": "oss",
                    "type": "ui"
                },
                {
                    "name": "dashboard",
                    "type": "ui"
                },
                {
                    "name": "dev-dash",
                    "type": "ui"
                }
            ]
        },
        {
            "name": "oss",
            "type": "ui",
            "children": [
                {
                    "name": "active-directory",
                    "type": "nfs"
                },
                {
                    "name": "passive-directory",
                    "type": "FAT32"
                }
            ]
        },
        {
            "name": "jira_db",
            "type": "database",
            "children": [

            ]
        },
        {
            "name": "active_directory",
            "type": "nfs",
            "children": []
        }
    ]
}

我正在尝试处理此数据，以便对于选定的根(名称)，数据将存在层次结构关系。例如。结果数据应如下所示(如果我选择了“bugs_db”)。

{
    "name": "bugs_db",
    "kind": "root",
    "children": [
        {
            "name": "oss",
            "type": "ui",
            "children": [
                {
                   "name": "active-directory",
                   "type": "nfs",
                   "children": []
                },
                {
                    "name": "passive-directory",
                    "type": "FAT32"
                }
            ]
        },
        {
            "name" : "dashboard",
            "type": "ui"
        },
        {
            "name": "dev-dash",
            "type": "ui"
        }
    ]
}

我已经尝试编写可以工作到 1 级的代码..

var selectedApp = "bugs_db";
var all_data = {
  name: selectedApp,
  type: "root",
  children: []
}
for(var i = 0; i < data.my_data.length; i++){
  var currentObj = data.my_data[i];
  if(currentObj.name == selectedApp && currentObj.children.length){
      for(var j = 0; j < currentObj.children.length; j++){
           let childObj = {
              name: currentObj.children[j].name,
              type: currentObj.children[j].type,
              children: []
           }
           allData.children.push(childObj);
      }
  }
}

但是上面的代码并没有进一步的层次化。我知道这可以使用某种递归函数来完成......但我不确定如何......可能这就是为什么陷入无限循环的原因。

任何人都可以在这里帮助我。如果您需要更多信息，请告诉我。

Answer 1

您可以通过构建新对象来采用映射和递归方法。

function getTree(name) {
    var object = map.get(name);
    return object && Object.assign({}, object, { children: object.children.map(o => Object.assign({}, o, getTree(o.name))) });
}

var object = { my_data: [{ name: "bugs_db", type: "database", children: [{ name: "oss", type: "ui" }, { name: "dashboard", type: "ui" }, { name: "dev-dash", type: "ui" }] }, { name: "oss", type: "ui", children: [{ name: "active-directory", type: "nfs" }, { name: "passive-directory", type: "FAT32" }] }, { name: "jira_db", type: "database", children: [] }, { name: "active_directory", type: "nfs", children: [] }] },
    map = new Map(object.my_data.map(o => [o.name, o]));

console.log(getTree("bugs_db"));

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

有循环检查。

function getTree(name, visited = new Set) {
    var object = map.get(name);

    if (!object) {
        return object;
    }

    if (visited.has(name)) {
        return object && Object.assign({}, object, { circular: true, children: [] });
    }

    visited.add(name);
    return Object.assign({}, object, { children: object.children.map(o => Object.assign({}, o, getTree(o.name, visited))) });
}

var object = { my_data: [{ name: "bugs_db", type: "database", children: [{ name: "oss", type: "ui" }, { name: "dashboard", type: "ui" }, { name: "dev-dash", type: "ui" }, { name: "bugs_db", type: "exception" }] }, { name: "oss", type: "ui", children: [{ name: "active-directory", type: "nfs" }, { name: "passive-directory", type: "FAT32" }] }, { name: "jira_db", type: "database", children: [] }, { name: "active_directory", type: "nfs", children: [] }] },
    map = new Map(object.my_data.map(o => [o.name, o]));

console.log(getTree("bugs_db"));

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