使用 JavaScript 将 JSON 对象数组转换为 nasted json 树

Question

我有一个 API 返回 JSON 对象数组。 需要根据每个节点中的“parentid”将其转换为父/子关系中嵌套的 JSON 数组。 其中“parientid”是 null 它将是根节点，其他将是父节点的子节点。 下面是我从 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,
  }
]

我想根据每个 object 中的“ParentId”将其转换为父/子关系中的树格式。下面是我要转换它的 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 数组，map function，但我应该遵循什么方法几乎不需要指导。

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的树形，然后我在结果数组上使用map ，它使用遍历树的递归 function 并为每个 object 提供最终形状。

另请注意， Array.prototype.concat方法用于返回一个新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);