最近在公司遇到了一个问题,要将树形结构的数据一个一个解析成数组格式的数据;
后台返回的json格式
[
{
'Id': '1',
'Name': '教学素材管理',
'Pid': '0',
'id': '659354849B9A44AA9E2477223DF68C96',
'children': [
{
'Id': '4DDA93E00CD34E4D812EC1A9E10AA883',
'Name': '教学素材',
'Pid': '659354849B9A44AA9E2477223DF68C96',
'id': '4DDA93E00CD34E4D812EC1A9E10AA883',
'children': [
{
'Id': '6CD3A04CFBC1419F81E1A66BDC81F177',
'Name': '修改',
'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
'id': '6CD3A04CFBC1419F81E1A66BDC81F177'
},
{
'Id': 'B93352644544420782337BC41C0534A9',
'Name': '添加',
'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
'id': 'B93352644544420782337BC41C0534A9'
}
]
},
{
'Id': '68F89C4E368048E699F3D7EDD69A86A7',
'Name': '测试试题',
'Pid': '659354849B9A44AA9E2477223DF68C96',
'id': '68F89C4E368048E699F3D7EDD69A86A7'
},
{
'Id': 'CF31D0CA5BC34765A61909B296E470C6',
'Name': '问题任务',
'Pid': '659354849B9A44AA9E2477223DF68C96',
'id': 'CF31D0CA5BC34765A61909B296E470C6'
}
]
},
{
'Id': 'B85EAE5FAAC64790AC62FA288E87AEAC',
'Name': '基础数据管理',
'Pid': '0',
'id': 'B85EAE5FAAC64790AC62FA288E87AEAC',
'children': [
{
'Id': '134D7E54B9D041539940D29E24592DF4',
'Name': '专业设置',
'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
'id': '134D7E54B9D041539940D29E24592DF4'
},
{
'Id': '2314DE1399484596A7440326E07590DB',
'Name': '专业管理',
'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
'id': '2314DE1399484596A7440326E07590DB'
}
]
}
]
因为前台用的插件是slickgrid,之前没有接触过这个插件,自己对js又不是很熟悉,(这个很操蛋,当初应该好好学js的,现在好多语法都不会),前台需要的格式如下:
[
{
'Id': '1',
'Name': '教学素材管理',
'Pid': '0',
'id': '659354849B9A44AA9E2477223DF68C96'
},
{
'Id': '4DDA93E00CD34E4D812EC1A9E10AA883',
'Name': '教学素材',
'Pid': '659354849B9A44AA9E2477223DF68C96',
'id': '4DDA93E00CD34E4D812EC1A9E10AA883'
},
{
'Id': '6CD3A04CFBC1419F81E1A66BDC81F177',
'Name': '修改',
'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
'id': '6CD3A04CFBC1419F81E1A66BDC81F177'
},
{
'Id': 'B93352644544420782337BC41C0534A9',
'Name': '添加',
'Pid': '4DDA93E00CD34E4D812EC1A9E10AA883',
'id': 'B93352644544420782337BC41C0534A9'
},
{
'Id': '68F89C4E368048E699F3D7EDD69A86A7',
'Name': '测试试题',
'Pid': '659354849B9A44AA9E2477223DF68C96',
'id': '68F89C4E368048E699F3D7EDD69A86A7'
},
{
'Id': 'CF31D0CA5BC34765A61909B296E470C6',
'Name': '问题任务',
'Pid': '659354849B9A44AA9E2477223DF68C96',
'id': 'CF31D0CA5BC34765A61909B296E470C6'
},
{
'Id': 'B85EAE5FAAC64790AC62FA288E87AEAC',
'Name': '基础数据管理',
'Pid': '0',
'id': 'B85EAE5FAAC64790AC62FA288E87AEAC'
},
{
'Id': '134D7E54B9D041539940D29E24592DF4',
'Name': '专业设置',
'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
'id': '134D7E54B9D041539940D29E24592DF4'
},
{
'Id': '2314DE1399484596A7440326E07590DB',
'Name': '专业管理',
'Pid': 'B85EAE5FAAC64790AC62FA288E87AEAC',
'id': '2314DE1399484596A7440326E07590DB'
}
]
虽然知道可以使用递归来完成,但是这个递归函数写了一天,都没有成功,哎,自己太菜了.
解决办法有2种
function flatten (data) {
return data.reduce((arr, {Id, Name, Pid, id, children = []}) =>
arr.concat([{Id, Name, Pid, id}], flatten(children)), [])
}
let menuArr = []
spread(menus)
console.info(menuArr)
function spread(menus) {
for (var i=0; i < menus.length; i++ ) {
menu = menus[i]
if (menu.children) {
spread(menu.children)
delete menu.children
}
menuArr.push(menu)
}
}
最后放一下前台的控制台打印的结果: