扁平数组结构与JSON树形结构 数据转化
什么是扁平数组?
let flatArr = [
{ id: 1, title: '标题1', parent_id: null },
{ id: 2, title: '标题2', parent_id: 0 },
{ id: 3, title: '标题2-1', parent_id: 2 },
{ id: 4, title: '标题3-2', parent_id: 7 },
{ id: 5, title: '标题3-1', parent_id: 6 },
{ id: 6, title: '标题3', parent_id: 0 },
];
什么是JSON树形结构?
[
{
"id":1,
"title":"标题1",
"parent_id":null
},
{
"id":2,
"title":"标题2",
"parent_id":0,
"children":[
{
"id":3,
"title":"标题2-1",
"parent_id":2
}
]
},
.....
]
准备数据
let flatArr = [
{ id: 1, title: '标题1', parent_id: null },
{ id: 2, title: '标题2', parent_id: 0 },
{ id: 3, title: '标题2-1', parent_id: 2 },
{ id: 4, title: '标题3-2', parent_id: 7 },
{ id: 5, title: '标题3-1', parent_id: 6 },
{ id: 6, title: '标题3', parent_id: 0 },
];
扁平数组结构转化为JSON树形结构
// 扁平数组结构转化为JSON树形结构
function convert(list) {
const result = [];
//设置键值对集合
const map = list.reduce((pre, cur) => {
pre[cur.id] = cur;
return pre;
}, {});
// item 一共三种状态,
// 1、父亲id不存在,
// 2、父亲id在传回来的数组中,
// 3、父亲id不在传回来的数组中
for (let item of list) {
//父亲id不存在
if (item.parent_id === 0) {
result.push(item);
continue;
}
//父亲id在传回来的数组中,
if (item.parent_id in map) {
const parent = map[item.parent_id];
parent.children = parent.children || [];
parent.children.push(item);
} else {
//父亲id不在传回来的数组中
result.push(item);
}
}
return result;
}
JSON树形结构转化为扁平数组结构
// JSON树形结构转化为扁平数组结构
function faltten(data) {
return data.reduce((pre, cur) => {
// const
const { id, title, parent_id, children = [] } = cur;
return pre.concat([{ id, title, parent_id }], faltten(children));
}, []);
}
经测试,数据显示正确。