Question

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

我想基于每个对象中的“ 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函数，但对于我应该采用哪种方法几乎不需要任何指导。

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，其中包含树木）时，建议使用Array.prototype.reduce。

在下面的代码示例中，我首先使用reduce将现有数组变成具有children的树形，然后在结果数组上使用map一个递归函数，它遍历树并赋予每个对象最终的形状。

还要注意，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);

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

2 个答案: