今天对接口的时候遇到了树形结构的数据,页面展示的时候需要做一些调整,因此得遍历一下返回的数据。请求得到的数据大致长这样:
{
"success": true,
"code": 200,
"message": "请求成功",
"data": [
{
"id": 1,
"pid": 0,
"name": "店铺管理",
"children": [
{
"id": 2,
"pid": 1,
"name": "店铺信息",
"children": []
}
]
},
{
"id": 3,
"pid": 0,
"name": "商品管理",
"children": [
{
"id": 4,
"pid": 3,
"name": "商品编辑",
"children": []
},
{
"id": 5,
"pid": 3,
"name": "商品上架",
"children": []
},
{
"id": 6,
"pid": 3,
"name": "商品下架",
"children": []
}
]
},
...
],
}
上面的JSON数据中的 id
需要改成 key
,name
需要改成 title
。直接展示代码(arrs即上面的data内容,that是一个空列表)
function traversalTree(arrs, that) {
arrs.map((item, index) => {
that.push({
key: item.id,
title: item.name,
children: [],
})
if (item.children.length !== 0) {
traversalTree(item.children, that[index].children)
}
})
}
效果图👇