有一个这样的多级菜单数据parentId为0代表第一级菜单，后端返回的数据是平级的，请问使用js如何变成树形菜单的数据？

Question

题目描述

有一个这样的多级菜单数据parentId为0代表第一级菜单，后端返回的数据是平级的，请问使用js如何变成树形菜单的数据。

题目来源及自己的思路

相关代码

[
    {"id":1,"parentId":0,"name":"1"},
    {"id":2,"parentId":1,"name":"2"},
    {"id":3,"parentId":1,"name":"3"},
    {"id":4,"parentId":2,"name":"4"},
    {"id":5,"parentId":2,"name":"5"},
    {"id":6,"parentId":8,"name":"6"},
    {"id":7,"parentId":4,"name":"7"},
    {"id":8,"parentId":5,"name":"8"},
    {"id":9,"parentId":0,"name":"9"},
    {"id":10,"parentId":9,"name":"10"},
    {"id":11,"parentId":9,"name":"11"}
]
//上面的数据格式如何转换成下面的
[
    {
        "id": 1,
        "parentId": 0,
        "name": "1",
        "children": [
            {
                "id": 2,
                "parentId": 1,
                "name": "2",
                "children":[...]
            },
            {
                "id": 3,
                "parentId": 1,
                "name": "3"
            }
        ]
    }
]

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

http://wintc.top/article/8
这篇文章最后给了一个通用写法．

Answer 2

/**

• 过滤出有权限的路由
• @param {*} menu 权限菜单
• @param {*} roleListIds
  */

export function getRoleMenuList(menu, roleListIds) {
  if (!Array.isArray(menu) || !menu.length) {
    return [];
  }
  const list = menu.filter(child => roleListIds.includes(child.id));
  list.forEach(v => {
    v.child = getRoleMenuList(v.child, roleListIds);
  });

  return list;
}