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

编程问答 2022-08-16

问题描述

我有一个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",{
    "DIAGID": 7,"DIAGNOSIS": "Intestinal infections due to Escherichia coli",{
    "DIAGID": 8,"DIAGNOSIS": "Neoplasms",{
    "DIAGID": 9,"DIAGNOSIS": "Neoplasms of brain or central nervous system","PARENTID": 8,{
    "DIAGID": 10,"DIAGNOSIS": "Primary neoplasms of brain ","PARENTID": 9,{
    "DIAGID": 11,"DIAGNOSIS": "Gliomas of brain","PARENTID": 10,{
    "DIAGID": 12,"DIAGNOSIS": "Glioblastoma of brain","PARENTID": 11,{
    "DIAGID": 13,"DIAGNOSIS": "Other specified gliomas of brain",}
]

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

解决方法

您可以对树进行单循环处理。

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",{ DIAGID: 7,DIAGNOSIS: "Intestinal infections due to Escherichia coli",{ DIAGID: 8,DIAGNOSIS: "Neoplasms",{ DIAGID: 9,DIAGNOSIS: "Neoplasms of brain or central nervous system",PARENTID: 8 },{ DIAGID: 10,DIAGNOSIS: "Primary neoplasms of brain ",PARENTID: 9 },{ DIAGID: 11,DIAGNOSIS: "Gliomas of brain",PARENTID: 10 },{ DIAGID: 12,DIAGNOSIS: "Glioblastoma of brain",PARENTID: 11 },{ DIAGID: 13,DIAGNOSIS: "Other specified gliomas of brain",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; }

,

当您要将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",{
    "DIAGID": 7,"DIAGNOSIS": "Intestinal infections due to Escherichia coli",{
    "DIAGID": 8,"DIAGNOSIS": "Neoplasms",{
    "DIAGID": 9,"DIAGNOSIS": "Neoplasms of brain or central nervous system","PARENTID": 8,{
    "DIAGID": 10,"DIAGNOSIS": "Primary neoplasms of brain ","PARENTID": 9,{
    "DIAGID": 11,"DIAGNOSIS": "Gliomas of brain","PARENTID": 10,{
    "DIAGID": 12,"DIAGNOSIS": "Glioblastoma of brain","PARENTID": 11,{
    "DIAGID": 13,"DIAGNOSIS": "Other specified gliomas of brain",}
];

const tree = createTree(API_DATA);

console.log(tree);