Question

我收到的数据是线性格式，例如：

const data = [
  {
    "id": "1",
    "parentId": null
  },
  {
    "id": "1.1",
    "parentId": "1"
  },
  {
    "id": "1.2",
    "parentId": "1"
  },
  {
    "id": "2",
    "parentId": null
  },
  {
    "id": "2.1",
    "parentId": "2"
  },
  {
    "id": "3",
    "parentId": null
  },
  {
    "id": "3.1",
    "parentId": "3"
  },
  {
    "id": "3.1.1",
    "parentId": "3.1"
  },
  {
    "id": "3.1.1.1",
    "parentId": "3.1.1"
  }
];

我想要做的是将其转换为分层格式，例如：

const hierarchicalData = [
  {
    "id": "1",
    "children": [
      {
        "id": "1.1",
      },
      {
        "id": "1.2",
      }
    ]
  },
  ...
]

我知道必须要有一个递归级别，但是我必须坚持不超过第一个级别，而不必事先知道这个级别数就可以强行使用它。

我已经在这里待了大约3个小时了，还不太了解如何做。

这是一个演示我的问题的示例：

var output = [];

$.each(data, function(index, value) {
    if (value.parentId === null) {
    value.children = [];
    output.push(value);
  } else {
    $.each(output, function(innerIndex, innerValue) {
        if (value.parentId === innerValue.id) {
        innerValue.children.push(value);
        return;
      }
    });
  }
});

console.log(output);

Answer 1

这是一种仅使用Vanilla JavaScript的替代方法。直接产生的对象o并不是您想要的，但它是一个很好的起点：

{
  "1": {
    "1": {
      "id": "1.1"
    },
    "2": {
      "id": "1.2"
    },
    "id": "1"
  },
  "2": {
    "1": {
      "id": "2.1"
    },
    "id": "2"
  },
  "3": {
    "1": {
      "1": {
        "1": {
          "id": "3.1.1.1"
        },
        "id": "3.1.1"
      },
      "id": "3.1"
    },
    "id": "3"
  }
}

然后通过将递归函数mca()（= makeChildArray）应用于对象，可以轻松实现您的准确结果：

const data = [
  {"id": "1","parentId": null},
  {"id": "1.1","parentId": "1"},
  {"id": "1.2","parentId": "1"},
  {"id": "2","parentId": null},
  {"id": "2.1","parentId": "2"},
  {"id": "3","parentId": null},
  {"id": "3.1","parentId": "3"},
  {"id": "3.1.1","parentId": "3.1"},
  {"id": "3.1.1.1","parentId": "3.1.1"}
];

// the "one-liner" to make object o:
var o={};
data.forEach(el=>el.id.split('.').reduce((so,k)=>so[k]=so[k] || {id:el.id}, o));

function mca(co){
 if (typeof co==='object'){
  var ret={},cok=Object.keys(co);
  var ncok=cok.filter(k=>!isNaN(k));
  cok.filter(isNaN).forEach(k=>ret[k]=co[k]);
  if (ncok.length) ret.children=ncok.map(k=>mca(co[k]));
  return ret;
 }
 else return co;
}
console.log(mca(o).children);

最终结果：

[
  {
    "id": "1",
    "children": [
      {
        "id": "1.1"
      },
      {
        "id": "1.2"
      }
    ]
  },
  {
    "id": "2",
    "children": [
      {
        "id": "2.1"
      }
    ]
  },
  {
    "id": "3",
    "children": [
      {
        "id": "3.1",
        "children": [
          {
            "id": "3.1.1",
            "children": [
              {
                "id": "3.1.1.1"
              }
            ]
          }
        ]
      }
    ]
  }
]

线性数组到分层

1 个答案: