如何将表示层次结构的一组数组合并到实际层次结构中

时间:2018-02-09 19:22:33

标签: javascript arrays

我正在尝试从数据源创建一个分层接口,将信息作为表示级别的单独数组提供。

我只是在寻找一些关于如何解决这个问题的灵感或想法。我尝试了一些没有成功的事情。

来源:

[
  [{id:1}, {id:2}, {id:3}],
  [{id:1}, {id:2}, {id:4}],
  [{id:5}, {id:6}],
  [{id:5}, {id:7}, {id:8}]
]

期望的结果:

[
  {
    "id":1,
    "children": [
      {
        "id": 2,
        "children": [
          {
            "id": 3
          },
          {
            "id": 4
          }
        ]
      }
    ]
  },{
    "id": 5,
    "children": [
      {
        "id": 6
      },
      {
        "id": 7,
        "children": [
          {
            "id": 8
          }
        ]
      }
    ]
  }
]

3 个答案:

答案 0 :(得分:1)

这是一个功能性的两步流程,首先将其转换为以下格式:

// this isn't even my final form(at)!
{
  1: {
    2: {
      3: {},
      4: {}
    }
  },
  5: {
    6: {},
    7: {
      8: {}
    }
  }
}

然后将其转换为最终格式:

function hierarchy (paths) {
  const root = paths.reduce(
    (root, nodes) => (
      nodes.reduce(
        (root, { id }) => root[id] = root[id] || {}, root
      ), root
    ), {}
  );
  
  return function recurse (root) {
    return Object.entries(root).reduce((root, [id, dir]) => {
      const children = recurse(dir);
      root.push(Object.assign({ id }, children.length > 0 ? { children } : {}));
      return root;
    }, []);
  }(root);
}

let source = [
  [{id:1}, {id:2}, {id:3}],
  [{id:1}, {id:2}, {id:4}],
  [{id:5}, {id:6}],
  [{id:5}, {id:7}, {id:8}]
];

console.log(hierarchy(source));

答案 1 :(得分:0)

通常你应该遍历4个元素中的每一个。并为每个元素创建树。由于原始数组固定为3个元素,我没有循环它,我只是假设它将是3个元素。

类似的东西:

function push_child(a,b) {
   if (a && !a.children) {
       a.children=[];
   }
   a.children.push(b);
}
let data = [
  [{id:1}, {id:2}, {id:3}],
  [{id:1}, {id:2}, {id:4}],
  [{id:5}, {id:6}],
  [{id:5}, {id:7}, {id:8}]
];
let long_data = []
for (let x=0; x<data.length; x++) {
    long_data.push(data[x][0]);
    push_child(long_data[x], data[x][1]);
    push_child(long_data[x].children, data[x][2]);
}

结果:

[{"id":1,"children":[{"id":2}]},{"id":1,"children":[{"id":2}]},{"id":5,"children":[{"id":6}]},{"id":5,"children":[{"id":7}]}]

答案 2 :(得分:0)

现在我已经找到了使用lodash的_.uniqBy方法和一些奇怪的数组行走/操作的解决方案,我发现很难描述的王。结束我知道的SO帖子不是一个好方法。我会试一试......

  1. 我使用_.uniqBy创建每个“图层”的唯一列表。图层是给定深度的项目数组,删除重复项。
  2. 在这样做的同时,我还保存了每个项目的“层次结构”的副本,即它所形成的原始数组。
  3. 最后,我在图层列表中向后走。对于每个图层,我通过将当前图层过滤到其“层次结构”中列出的图层来填充前面的图层“children”。
  4. 这可能只有效,因为在这个系统中,项目永远不会存在于不同的层。无论如何,不​​确定这是否能帮助任何人,但我设法帮助自己,所以,是的。