动态转换数组为树状结构
Dynamically convert array to tree-like structure
有人能告诉我最有效的方式来转换数组到树状结构?
var array= [
{id: "1", name: "header1"},
{id: "2", name: "header2"},
{id: "1.1", name: "subheader1.1"},
{id: "1.2", name: "subheader1.2"},
{id: "2.1", name: "subheader2.1"},
{id: "2.2", name: "subheader2.2"},
{id: "1.1.1", name: "subheader1detail1"},
{id: "2.1.1", name: "subheader2detail2"}
];
结果数组必须像这样:
var array = [{
id: "1",
name: "header1",
items: [{
id: "1.1",
name: "subheader1.1",
items: [{
id: "1.1.1",
name: "subheader1detail1",
}]
}, {
id: "1.2",
name: "subheader1.2"
}]
}, {
id: "2",
name: "header2",
items: [{
id: "2.1",
name: "subheader2.1",
items: [{
id: "2.1.1",
name: "subheader2detail2",
}]
}, {
id: "2.2",
name: "subheader2.2"
}]
}]
Thanks in advance
您可以使用树并在其上构建嵌套数组。这个建议需要一个排序列表。
基本上,它查找节点的父节点,如果节点没有父节点,则查找根节点并将其插入结果数组。如果找到了父节点,则将实际节点插入到父节点的items
属性中。
var array = [{ id: "1", name: "header1" }, { id: "2", name: "header2" }, { id: "1.1", name: "subheader1.1" }, { id: "1.2", name: "subheader1.2" }, { id: "2.1", name: "subheader2.1" }, { id: "2.2", name: "subheader2.2" }, { id: "1.1.1", name: "subheader1detail1" }, { id: "2.1.1", name: "subheader2detail2" }],
result = [];
array.forEach(function (a) {
var parent = a.id.split('.').slice(0, -1).join('.');
this[a.id] = { id: a.id, name: a.name };
if (parent) {
this[parent] = this[parent] || {};
this[parent].items = this[parent].items || [];
this[parent].items.push(this[a.id]);
} else {
result.push(this[a.id]);
}
}, {});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
您可以尝试这样做:
我已经添加了注释来解释逻辑
var array= [
{id: "1", name: "header1"},
{id: "2", name: "header2"},
{id: "1.1", name: "subheader1.1"},
{id: "1.2", name: "subheader1.2"},
{id: "2.1", name: "subheader2.1"},
{id: "2.2", name: "subheader2.2"},
{id: "1.1.1", name: "subheader1detail1"},
{id: "2.1.1", name: "subheader2detail2"},
];
var result = {};
// Sort in case values are not in order.
// This is to ensure parent is rendered before child
array.sort(function(a, b) {
return a.id > b.id ? 1 : a.id - b.id ? -1 : 0
})
// Loop over sorted array to parse
.forEach(function(el) {
// Check if element does not exists to prevent duplicate
if (!result[el.id]) {
// if parent, push it
if (el.id.indexOf('.') === -1)
result[el.id] = el;
// If child, compute depth and search object to push to
else {
var ids = el.id.split('.');
var _id = '';
// temp variable to hold position to push
var r = result[ids[0]];
for (var i = 1; i < ids.length; i++) {
// Compute the object id
_id = (_id ? _id + '.' : _id) + ids[i - 1];
// initialize items
r.items = r.items || [];
// search in items to get object if exist
var o = r.items.find(x => x.id === _id);
// if object exists, assign it to temp variable
// If not, push to parent
if (o) r = o;
}
if (r) {
r.items = r.items || [];
r.items.push(el);
}
}
}
})
console.log(result)
注意:我已经改变了结构来保存一个对象而不是一个数组
是摆弄这里的问题-跨解决方案共享使用Array.prototype.reduce
和本地hash table
-也排序的结果。干杯!
var array=[{id:"2",name:"header2"},{id:"1",name:"header1"},{id:"1.1",name:"subheader1.1"},{id:"1.2",name:"subheader1.2"},{id:"2.2",name:"subheader2.2"},{id:"2.1",name:"subheader2.1"},{id:"1.1.1",name:"subheader1detail1"},{id:"2.1.1",name:"subheader2detail2"}];
var result = array.sort(function(a,b) {
return a.id - b.id;
}).reduce(function(hash) {
return function(prev, curr) {
var keys = curr.id.split('.');
hash[curr.id] = hash[curr.id] || {};
hash[curr.id] = {id: curr.id,name: curr.name};
if (keys && keys.length > 1) {
keys.pop();
var key = keys.join('.');
hash[key].items = hash[key].items || [];
hash[key].items.push(hash[curr.id]);
} else {
prev.push(hash[curr.id]);
}
return prev;
};
}(Object.create(null)), []);
console.log(result);
.as-console-wrapper {top: 0;max-height: 100%!important;}
相关文章:
- 如何将我的json结构转换为C3.js所需的列结构
- 将数据结构转换为二进制数据
- 将json结构转换为可用的javascript数据集
- 无法识别的数据结构-转换为对象
- 与restify一起,我的帖子显示了一个“;将循环结构转换为JSON”;错误
- io.sockets.clients()给出错误“”;将循环结构转换为JSON”;
- 如何将重叠结构转换为 js-ctypes
- 使用 Node.js 将文件系统中的目录结构转换为 JSON
- JQuery TypeError:在MVC中将循环结构转换为JSON
- Uncatch TypeError:在 Jquery.each 中使用 JSON.stringfy 将循环结构转换为 J
- 如何序列化全日历源.将循环结构转换为 JSON 错误
- 类型错误:将循环结构转换为 JSON:有没有办法忽略此警告
- 注入带有流星会话返回的脚本,将循环结构转换为JSON
- 使用Django模板(列表和dicts)将Python数据结构转换为js数据结构
- 如何操作对象's结构转换成'点符号'-样式数组
- img ng-src:TypeError:将循环结构转换为JSON
- 使用javascript将Sharepoint在线文件结构转换为json文件
- 将嵌套数据结构转换为使用类对象
- 如何将此数据结构转换为数组
- 如何将JSON对象结构转换为点表示法