使用 JavaScript 将 JSON 对象数组转换为嵌套的 json 树

Question

我有一个 API return JSON 对象数组。需要根据每个节点中的“parentid”将其转换为 parent/child 关系中的嵌套 JSON 数组。如果“parentid”为空，它将是根节点，其他将是该父节点的子节点。下面是我从 API.

得到的示例 JSON 数组

  var API_DATA = [
  {
    "DIAGID": 1,
    "DIAGNOSIS": "Certain infectious or parasitic diseases ",
    "DIAGTYPE": "Chapter",
    "PARENTID": null,
  },
  {
    "DIAGID": 2,
    "DIAGNOSIS": "Gastroenteritis or colitis of infectious origin  ",
    "DIAGTYPE": "Section",
    "PARENTID": 1,
  },
  {
    "DIAGID": 3,
    "DIAGNOSIS": "Bacterial intestinal infections",
    "DIAGTYPE": "Category",
    "PARENTID": 2,
  },
  {
    "DIAGID": 4,
    "DIAGNOSIS": "Cholera",
    "DIAGTYPE": "Group",
    "PARENTID": 3,
  },
  {
    "DIAGID": 5,
    "DIAGNOSIS": "Intestinal infection due to other Vibrio",
    "DIAGTYPE": "Disease",
    "PARENTID": 4,
  },
  {
    "DIAGID": 6,
    "DIAGNOSIS": "Intestinal infections due to Shigella",
    "DIAGTYPE": "Disease",
    "PARENTID": 4,
  },
  {
    "DIAGID": 7,
    "DIAGNOSIS": "Intestinal infections due to Escherichia coli",
    "DIAGTYPE": "Disease",
    "PARENTID": 4,
  },
  {
    "DIAGID": 8,
    "DIAGNOSIS": "Neoplasms",
    "DIAGTYPE": "Chapter",
    "PARENTID": null,
  },
  {
    "DIAGID": 9,
    "DIAGNOSIS": "Neoplasms of brain or central nervous system",
    "DIAGTYPE": "Section",
    "PARENTID": 8,
  },
  {
    "DIAGID": 10,
    "DIAGNOSIS": "Primary neoplasms of brain ",
    "DIAGTYPE": "Category",
    "PARENTID": 9,
  },
  {
    "DIAGID": 11,
    "DIAGNOSIS": "Gliomas of brain",
    "DIAGTYPE": "Group",
    "PARENTID": 10,
  },
  {
    "DIAGID": 12,
    "DIAGNOSIS": "Glioblastoma of brain",
    "DIAGTYPE": "Disease",
    "PARENTID": 11,
  },
  {
    "DIAGID": 13,
    "DIAGNOSIS": "Other specified gliomas of brain",
    "DIAGTYPE": "Disease",
    "PARENTID": 11,
  }
]

我想根据每个对象中的“ParentId”将其转换为 parent/child 关系中的树格式。下面是我要转换它的 JSON 的例子。我想要“DIAGID”作为值，“DIAGNOSIS”作为名称。

const data = {
  label: 'search me',
  value: 'searchme',
  children: [
    {
      label: 'search me too',
      value: 'searchmetoo',
      children: [
        {
          label: 'No one can get me',
          value: 'anonymous',
        },
      ],
    },
  ],
}

我是 javascript 的新手，我使用过 javascript 数组和映射函数，但几乎不需要指导我应该遵循什么方法。

Answer 1

您可以对具有单个循环的树采用标准方法。

var data = [{ DIAGID: 1, DIAGNOSIS: "Certain infectious or parasitic diseases ", DIAGTYPE: "Chapter", PARENTID: null }, { DIAGID: 2, DIAGNOSIS: "Gastroenteritis or colitis of infectious origin  ", DIAGTYPE: "Section", PARENTID: 1 }, { DIAGID: 3, DIAGNOSIS: "Bacterial intestinal infections", DIAGTYPE: "Category", PARENTID: 2 }, { DIAGID: 4, DIAGNOSIS: "Cholera", DIAGTYPE: "Group", PARENTID: 3 }, { DIAGID: 5, DIAGNOSIS: "Intestinal infection due to other Vibrio", DIAGTYPE: "Disease", PARENTID: 4 }, { DIAGID: 6, DIAGNOSIS: "Intestinal infections due to Shigella", DIAGTYPE: "Disease", PARENTID: 4 }, { DIAGID: 7, DIAGNOSIS: "Intestinal infections due to Escherichia coli", DIAGTYPE: "Disease", PARENTID: 4 }, { DIAGID: 8, DIAGNOSIS: "Neoplasms", DIAGTYPE: "Chapter", PARENTID: null }, { DIAGID: 9, DIAGNOSIS: "Neoplasms of brain or central nervous system", DIAGTYPE: "Section", PARENTID: 8 }, { DIAGID: 10, DIAGNOSIS: "Primary neoplasms of brain ", DIAGTYPE: "Category", PARENTID: 9 }, { DIAGID: 11, DIAGNOSIS: "Gliomas of brain", DIAGTYPE: "Group", PARENTID: 10 }, { DIAGID: 12, DIAGNOSIS: "Glioblastoma of brain", DIAGTYPE: "Disease", PARENTID: 11 }, { DIAGID: 13, DIAGNOSIS: "Other specified gliomas of brain", DIAGTYPE: "Disease", PARENTID: 11 }],
    tree = function (data, root) {
        var t = {};
        data.forEach(({ DIAGID, DIAGNOSIS, PARENTID }) => {
            Object.assign(t[DIAGID] = t[DIAGID] || {}, { label: DIAGID, name: DIAGNOSIS });
            t[PARENTID] = t[PARENTID] || {};
            t[PARENTID].children = t[PARENTID].children || [];
            t[PARENTID].children.push(t[DIAGID]);
        });
        return t[root].children;
    }(data, null);

console.log(tree);

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

Answer 2

当你想将 Array 变成另一种形状时，我建议使用 Array.prototype.reduce（在本例中是不同长度的 Array，包含树木）。

在下面的代码示例中，我首先使用 reduce 将现有数组转换为带有 children 的 tree-shape，然后对结果使用 map数组，它使用遍历树并为每个对象提供最终形状的递归函数。

另请注意，Array.prototype.concat 方法用于 return 一个新的 Array 并在末尾添加值。

function findParent(arr, diagId) {
  return arr.find((parent) => parent.DIAGID === diagId);
}

function createTreeNode(value) {
  return {
    label: value.DIAGNOSIS,
    value: value.DIAGID,
    children: (value.children !== undefined)
      ? value.children.map(createTreeNode)
      : undefined
  };
}

function createTree(data) {
  return data
    // first restructure existing nodes as a tree
    .reduce((result, value, index, originalArray) => {
      if (value.PARENTID !== null) {
        const parent = findParent(originalArray, value.PARENTID);

        if (parent) {
          // add as child if has parent
          parent.children = (parent.children || []).concat(value);
        }

        return result;
      } else {
        // Add value to top level of the result array
        return result.concat(value);
      }
    }, [] /* Initialize with empty result array */)
    // them map to new data type
    .map(createTreeNode);
}

var API_DATA = [
  {
    "DIAGID": 1,
    "DIAGNOSIS": "Certain infectious or parasitic diseases ",
    "DIAGTYPE": "Chapter",
    "PARENTID": null,
  },
  {
    "DIAGID": 2,
    "DIAGNOSIS": "Gastroenteritis or colitis of infectious origin  ",
    "DIAGTYPE": "Section",
    "PARENTID": 1,
  },
  {
    "DIAGID": 3,
    "DIAGNOSIS": "Bacterial intestinal infections",
    "DIAGTYPE": "Category",
    "PARENTID": 2,
  },
  {
    "DIAGID": 4,
    "DIAGNOSIS": "Cholera",
    "DIAGTYPE": "Group",
    "PARENTID": 3,
  },
  {
    "DIAGID": 5,
    "DIAGNOSIS": "Intestinal infection due to other Vibrio",
    "DIAGTYPE": "Disease",
    "PARENTID": 4,
  },
  {
    "DIAGID": 6,
    "DIAGNOSIS": "Intestinal infections due to Shigella",
    "DIAGTYPE": "Disease",
    "PARENTID": 4,
  },
  {
    "DIAGID": 7,
    "DIAGNOSIS": "Intestinal infections due to Escherichia coli",
    "DIAGTYPE": "Disease",
    "PARENTID": 4,
  },
  {
    "DIAGID": 8,
    "DIAGNOSIS": "Neoplasms",
    "DIAGTYPE": "Chapter",
    "PARENTID": null,
  },
  {
    "DIAGID": 9,
    "DIAGNOSIS": "Neoplasms of brain or central nervous system",
    "DIAGTYPE": "Section",
    "PARENTID": 8,
  },
  {
    "DIAGID": 10,
    "DIAGNOSIS": "Primary neoplasms of brain ",
    "DIAGTYPE": "Category",
    "PARENTID": 9,
  },
  {
    "DIAGID": 11,
    "DIAGNOSIS": "Gliomas of brain",
    "DIAGTYPE": "Group",
    "PARENTID": 10,
  },
  {
    "DIAGID": 12,
    "DIAGNOSIS": "Glioblastoma of brain",
    "DIAGTYPE": "Disease",
    "PARENTID": 11,
  },
  {
    "DIAGID": 13,
    "DIAGNOSIS": "Other specified gliomas of brain",
    "DIAGTYPE": "Disease",
    "PARENTID": 11,
  }
];

const tree = createTree(API_DATA);

console.log(tree);

使用 JavaScript 将 JSON 对象数组转换为嵌套的 json 树

Convert JSON array of objects into nasted json tree usning JavaScript

javascript

arrays

treeview

json