分层树视图

Question

我想从我的MySql数据响应创建一个层次结构，它有jsut id和sponsor_id。我不知道如何开始，请帮我解决这个问题

[ { "id": 2723021, "sponsor_id": "2723020" }, { "id": 2723022, "sponsor_id": "2723021" }, { "id": 2723023, "sponsor_id": "2723021" }, { "id": 2723024, "sponsor_id": "2723021" }, { "id": 2723025, "sponsor_id": "2723022" }, { "id": 2723026, "sponsor_id": "2723022" }, { "id": 2723027, "sponsor_id": "2723022" }, { "id": 2723028, "sponsor_id": "2723023" }, { "id": 2723029, "sponsor_id": "2723023" }, { "id": 2723030, "sponsor_id": "2723023" }, { "id": 2723031, "sponsor_id": "2723024" }, { "id": 2723032, "sponsor_id": "2723024" }, { "id": 2723033, "sponsor_id": "2723024" }, { "id": 2723034, "sponsor_id": "2723025" } ]

我没有想到什么以及如何开始

Answer 1

只需按项目 id 创建地图，然后找到父项并向其添加子项即可：

const arr = [ { "id": 2723021, "sponsor_id": "2723020" }, { "id": 2723022, "sponsor_id": "2723021" }, { "id": 2723023, "sponsor_id": "2723021" }, { "id": 2723024, "sponsor_id": "2723021" }, { "id": 2723025, "sponsor_id": "2723022" }, { "id": 2723026, "sponsor_id": "2723022" }, { "id": 2723027, "sponsor_id": "2723022" }, { "id": 2723028, "sponsor_id": "2723023" }, { "id": 2723029, "sponsor_id": "2723023" }, { "id": 2723030, "sponsor_id": "2723023" }, { "id": 2723031, "sponsor_id": "2723024" }, { "id": 2723032, "sponsor_id": "2723024" }, { "id": 2723033, "sponsor_id": "2723024" }, { "id": 2723034, "sponsor_id": "2723025" } ]


const map = arr.reduce((r, item) => (r[item.id] = item, r), {});
let root;
Object.values(map).forEach(item => {
  const parent = map[item.sponsor_id];
  parent ? (parent.children ??= []).push(item) : root = item;
});

console.log(root);