我想从平面数组构建一个树形数组:
下面是平面数组:
nodes = [
{id: 1, pid: 0, name: "kpittu"},
{id: 2, pid: 0, name: "news"},
{id: 3, pid: 0, name: "menu"},
{id: 4, pid: 3, name: "node"},
{id: 5, pid: 4, name: "subnode"},
{id: 6, pid: 1, name: "cace"}
];
NB:id=节点id;pid=父节点id。
我想将其转换为这个数组:
nodes = [{
id: 1,
name: 'kpittu',
childs: [{
id: 6,
name: 'cace'
}]
}, {
id: 2,
name: 'news'
}, {
id: 3,
name: 'menu',
childs: [{
id: 4,
name: 'node',
childs: [{
id: 5,
name: 'subnode'
}]
}]
}];
我试图使用递归函数来实现预期的结果,但我正在寻找更好的方法。谢谢你的回复。
使用数组#reduce和辅助对象进行迭代:
var nodes = [
{id: 1, pid: 0, name: "kpittu"},
{id: 2, pid: 0, name: "news"},
{id: 3, pid: 0, name: "menu"},
{id: 4, pid: 3, name: "node"},
{id: 5, pid: 4, name: "subnode"},
{id: 6, pid: 1, name: "cace"}
];
const helper = nodes.reduce((h, o) => (h[o.id] = Object.assign({}, o), h), Object.create(null));
const tree = nodes.reduce((t, node) => {
const current = helper[node.id];
if(current.pid === 0) { // if it doesn't have a parent push to root
t.push(current);
} else {
helper[node.pid].children || (helper[node.pid].children = []) // add the children array to the parent, if it doesn't exist
helper[node.pid].children.push(current); // push the current item to the parent children array
}
return t;
}, []);
console.log(tree);
您还可以使用ES6中引入的Map对象。
let nodes = [
{ id: 1, pid: 0, name: "kpittu" },
{ id: 2, pid: 0, name: "news" },
{ id: 3, pid: 0, name: "menu" },
{ id: 4, pid: 3, name: "node" },
{ id: 5, pid: 4, name: "subnode" },
{ id: 6, pid: 1, name: "cace" }
];
function toTree(arr) {
let arrMap = new Map(arr.map(item => [item.id, item]));
let tree = [];
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
if (item.pid) {
let parentItem = arrMap.get(item.pid);
if (parentItem) {
let { children } = parentItem;
if (children) {
parentItem.children.push(item);
} else {
parentItem.children = [item];
}
}
} else {
tree.push(item);
}
}
return tree;
}
let tree = toTree(nodes);
console.log(tree);
您可以使用散列表,并将每个循环中的< code>id和< code>pid作为连接的节点。
此建议也适用于未排序的数据。
var nodes = [{ id: 6, pid: 1, name: "cace" }, { id: 1, pid: 0, name: "kpittu" }, { id: 2, pid: 0, name: "news" }, { id: 3, pid: 0, name: "menu" }, { id: 4, pid: 3, name: "node" }, { id: 5, pid: 4, name: "subnode" }],
tree = function (data, root) {
var r = [], o = {};
data.forEach(function (a) {
if (o[a.id] && o[a.id].children) {
a.children = o[a.id] && o[a.id].children;
}
o[a.id] = a;
if (a.pid === root) {
r.push(a);
} else {
o[a.pid] = o[a.pid] || {};
o[a.pid].children = o[a.pid].children || [];
o[a.pid].children.push(a);
}
});
return r;
}(nodes, 0);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
我正在尝试将来自我的数据库的对象的平面数组转换为需要嵌套结构才能管理可扩展子行的react-table。 我已经制作了一个代码沙盒,它非常简单: https://codesandbox.io/s/tender-chatterjee-kdssi?file=/src/App.js 基本上,我的原始数据结构如下: 我想把它转换成这个结构: 我已经尝试了一些递归的方法,但是他们留下了一些选择,所以我很乐意
问题内容: 我有一个复杂的json文件,必须使用javascript处理才能使其具有层次结构,以便稍后构建树。json的每个条目都具有:id:唯一ID,parentId:父节点的id(如果节点是树的根,则为0)level:树中的深度级别 json数据已被“排序”。我的意思是,条目上方将具有父节点或兄弟节点,而其下将具有子节点或兄弟节点。 输入: 预期产量: 问题答案: 如果使用地图查找,则有一个有
问题内容: 具有如下数据结构: 如何构造Items的标题数组?如[‘One’,’Two’] 如果 标题 == [] {。,则此代码集将生成“语法错误:意外的标识符” 。 问题答案: 我只会用新数组返回标题 小提琴 此外,该错误是由于缺少括号引起的 应该 甚至更好
我有这个初始数组,希望根据和提取重复航班 我写了这个,但我只能得到第一个重复的,看起来不是很漂亮。 有什么建议吗?
问题内容: 问题在于确定以下符号之间的权衡: 基于JSON : 基于数组 : 关于同一问题的这篇文章,我已经决定(在前端)使用JSON对象表示法而不是对象数组,因为它符合我的要求,更好的性能和更少的浏览器代码。 但是问题在于列表本身不是静态的。我的意思是,该列表正在生成,即从DB(NoSQL)获取/存储,并通过服务器上的JavaAPI为新条目创建。我无法决定在后端应使用哪种表示法(最终也会影响UI
我有两个数组:和。 数组中的示例值:。 数组中的值示例:。 我需要创建一个JavaScript对象,将数组中的所有项放在同一个对象中。例如