将对象数组转换为分层数据结构

如何解决将对象数组转换为分层数据结构

我有一个原始数组，我想在需要分层数据结构的 Sunburst 地图中绘制它。

[
{id: "Asia,India,NewDelhi",value: 41},{id: "Europe,Germany,Berlin",value: 24},England,London",value: 3},{id: "northAmerica,USA,NewYork",value: 4},Boston",chicago",{id: "Austrailia,Sydney",{id: "Asia,China,Beijing",value: 2},]

想要的结果

[
  {
   id: Asia,children:[{
     id: India,children:[{
       id: Delhi,value: 41,}]
     },{
      id:China,children:[{
        id: Beijing
        value: 2,}]
     }]
  },{
    id: Europe,children: [{
       id: Germany,children: [{
          id: Berlin,value: 24,}]
    },{
       id: England,children: [{
         id: London,value: 3,}]
    }]
  },{
   id: northAmerica,children:[{
      id: USA,children:[{
        id: NewYork,value: 4,},{
        id: Boston,{
        id: Chicago,}]
   }]
  },{
   id: Austrailia
   children: [{
     id:Sydney,}]
  },]

谁能帮我解决这个问题，我试过使用 reduce 方法，但我无法得到想要的结果。

PS：如果有人能提出一个答案来处理用逗号分隔的 n 个 id，那将非常有用。例如：这里我们有 3 个用逗号分隔的 id 层次结构，如果有 4 或 5 个深度数据会发生什么。

解决方法

一个简单的递归解决方案：

const data = [
  {id: "Asia,India,NewDelhi",value: 41},{id: "Europe,Germany,Berlin",value: 24},England,London",value: 3},{id: "NorthAmerica,USA,NewYork",value: 4},Boston",Chicago",{id: "Austrailia,Sydney",{id: "Asia,China,Beijing",value: 2},];

const addChild = (ids,value,arr) => {
  const id = ids.shift();
  let index = arr.findIndex(item => item.id === id);
  if (index < 0) {
    arr.push({id,children: []});
    index = arr.length - 1;
  }
  if (ids.length > 0) {
    const children = arr[index].children;
    addChild(ids,children);
  }
  else
    arr[index].value = value;
}

const treeData = data.reduce((tree,item) => {
  const ids = item.id.split(',');
  addChild(ids,item.value,tree);
  return tree;
},[]);

console.log(treeData);

,

从您的输入构建对象的层次结构相当简单，您甚至不需要做任何递归循环 + reduce 就可以做到。这将适用于逗号分隔列表中的任意数量的级别。

const input = [
{id: "Asia,chicago",value: 2}
]
const result = input.map(o => ({ids:o.id.split(","),value:o.value})).reduce( (acc,obj) => {
   let curr = acc;
   let id;
   while( (id = obj.ids.shift()) != null ){
     if(!curr[id])
        curr[id] = {};
        
     curr = curr[id];
   }
   curr.value = obj.value
   return acc;
},{});
console.log(result);

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

然后将其转换为您想要的格式确实需要一些递归：

const input = [
{id: "Asia,{});

function buildHierarchy(input){
  return Object.entries(input).map( ([id,children]) => {
    if(children.value){
      return {id,value:children.value}
    }
    return {id,children: buildHierarchy(children)}
  })
}

console.log(buildHierarchy(result));

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