小贝子编程

将数组转换为嵌套的JSON对象-Angular Material树



我正在拼命地尝试从JSON嵌套格式的角度树中获取选定的节点。到目前为止，我设法用this.checklistSelection.selected获得了选定的平面节点阵列。但我需要的是，我需要获得JSON格式的选定节点，并按级别嵌套所有JSON对象。

[{item: "Risk Analysis", level: 0, expandable: true}
,{item: "Standard", level: 1, expandable: true}
,{item: "Active", level: 2, expandable: true}
,{item: "Volatility", level: 3, expandable: true}
,{item: "Contribution", level: 4, expandable: true}
,{item: "Total", level: 5, expandable: false}
,{item: "Systematic", level: 5, expandable: false}
,{item: "Specific", level: 5, expandable: false}
,{item: "VaR (95%, 2 weeks, Chebyshev)", level: 3, expandable: true}
,{item: "Contribution", level: 4, expandable: true}
,{item: "Total", level: 5, expandable: false}
,{item: "Systematic", level: 5, expandable: false}
,{item: "Specific", level: 5, expandable: false}
,{item: "Benchmark", level: 2, expandable: true}
,{item: "Volatility", level: 3, expandable: true}
,{item: "Contribution", level: 4, expandable: true}
,{item: "Total", level: 5, expandable: false}
,{item: "Systematic", level: 5, expandable: false}
,{item: "Specific", level: 5, expandable: false}
,{item: "VaR (95%, 2 weeks, Chebyshev)", level: 3, expandable: true}
,{item: "Contribution", level: 4, expandable: true}
,{item: "Total", level: 5, expandable: false}
,{item: "Systematic", level: 5, expandable: false}
,{item: "Specific", level: 5, expandable: false}
,{item: "Portfolio", level: 2, expandable: true}
,{item: "Volatility", level: 3, expandable: true}
,{item: "Contribution", level: 4, expandable: true}
,{item: "Total", level: 5, expandable: false}
,{item: "Systematic", level: 5, expandable: false}
,{item: "Specific", level: 5, expandable: false}
,{item: "VaR (95%, 2 weeks, Chebyshev)", level: 3, expandable: true}
,{item: "Contribution", level: 4, expandable: true}
,{item: "Total", level: 5, expandable: false}
,{item: "Systematic", level: 5, expandable: false}
,{item: "Specific", level: 5, expandable: false}]

预期：

"Risk Analysis": {
"Standard": {
"Active": {
"Volatility": {
"Contribution": ["Total", "Systematic", "Specific"]
},
"VaR (95%, 2 weeks, Chebyshev)": {
"Contribution": ["Total", "Systematic", "Specific"]
}
},
"Portfolio": {
"Volatility": {
"Contribution": ["Total", "Systematic", "Specific"]
},
"VaR (95%, 2 weeks, Chebyshev)": {
"Contribution": ["Total", "Systematic", "Specific"]
}
},
"Benchmark": {
"Volatility": {
"Contribution": ["Total", "Systematic", "Specific"]
},
"VaR (95%, 2 weeks, Chebyshev)": {
"Contribution": ["Total", "Systematic", "Specific"]
}
}
}
}
}

有人能告诉我Mat-tree是否提供了一种方法，或者任何一种函数都可以实现这一魔法吗？

提前感谢：(

为了构建树，您需要通过为每个项分配ID来预处理数据。在分配关系时，可以使用堆栈来跟踪关系。

你可以分阶段完成：

  1. 为每个项目分配id和parentId密钥(applyRelationships(
  2. 将平面阵列转换为树(listToTree(
  3. 将树转换为对象(treeToObject(

在最初的例子中，我通过设置最大深度来强行嵌套每个对象。我没有使用expandable属性。在这个修改后的示例中，我放弃了maxDepth参数。

const main = () => {
useCases.forEach(({ data, expected }) => {
const actual = buildTreeObject(data);
console.log(JSON.stringify(actual) === JSON.stringify(expected));
console.log(actual);
});
};
const useCases = [{
data: [
{ item: "Risk Analysis", level: 0, expandable: true },
{ item: "Volatility", level: 1, expandable: true },
{ item: "Total", level: 2, expandable: false },
{ item: "Systematic", level: 2, expandable: false },
{ item: "Specific", level: 2, expandable: false },
{ item: "TaR (68%, 1 year)", level: 1, expandable: true },
{ item: "Total", level: 2, expandable: false },
{ item: "Systematic", level: 2, expandable: false },
{ item: "Specific", level: 2, expandable: false },
{ item: "VaR (95%, 2 weeks, Chebyshev)", level: 1, expandable: true },
{ item: "Total", level: 2, expandable: false },
{ item: "Systematic", level: 2, expandable: false },
{ item: "Specific", level: 2, expandable: false }
],
expected: {
"Risk Analysis": {
"Volatility": ["Total", "Systematic", "Specific"],
"TaR (68%, 1 year)": ["Total", "Systematic", "Specific"],
"VaR (95%, 2 weeks, Chebyshev)": ["Total", "Systematic", "Specific"]
}
}
}, {
data: [
{ item: "Risk Analysis", level: 0, expandable: true },
{ item: "Standard", level: 1, expandable: true },
{ item: "Active", level: 2, expandable: true },
{ item: "Volatility", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false }
],
expected: {
"Risk Analysis": {
"Standard": {
"Active": {
"Volatility": {
"Contribution": [ "Total", "Systematic", "Specific" ]
}
}
}
}
}
}, {
data: [
{ item: "Risk Analysis", level: 0, expandable: true },
{ item: "Standard", level: 1, expandable: true },
{ item: "Active", level: 2, expandable: true },
{ item: "Volatility", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false },
{ item: "VaR (95%, 2 weeks, Chebyshev)", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false },
{ item: "Benchmark", level: 2, expandable: true },
{ item: "Volatility", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false },
{ item: "VaR (95%, 2 weeks, Chebyshev)", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false },
{ item: "Portfolio", level: 2, expandable: true },
{ item: "Volatility", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false },
{ item: "VaR (95%, 2 weeks, Chebyshev)", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false }
],
expected: {
"Risk Analysis": {
"Standard": {
"Active": {
"Volatility": {
"Contribution": ["Total", "Systematic", "Specific"]
},
"VaR (95%, 2 weeks, Chebyshev)": {
"Contribution": ["Total", "Systematic", "Specific"]
}
},
"Benchmark": {
"Volatility": {
"Contribution": ["Total", "Systematic", "Specific"]
},
"VaR (95%, 2 weeks, Chebyshev)": {
"Contribution": ["Total", "Systematic", "Specific"]
}
},
"Portfolio": {
"Volatility": {
"Contribution": ["Total", "Systematic", "Specific"]
},
"VaR (95%, 2 weeks, Chebyshev)": {
"Contribution": ["Total", "Systematic", "Specific"]
}
},
}
}
}
}];
const applyRelationships = (data) => {
let levelStack = [], lastNode = null;
return data.map((curr, index) => {
const node = { ...curr, id: index + 1 };
if (levelStack.length === 0) {
levelStack.push({ level: node.level, parent: 0 });
} else {
const last = levelStack[levelStack.length - 1];
if (node.level > last.level) {
levelStack.push({ level: node.level, parent: lastNode.id });
} else if (node.level < last.level) {
const
levelDiff = last.level - node.level - 1,
lastIndex = levelStack.length - 1;
levelStack.splice(lastIndex - levelDiff, lastIndex);
}
}
node.parentId = levelStack[levelStack.length - 1].parent;
lastNode = node;
return node;
});
};
const listToTree = (arr = []) => {
let indexMap = new Map();
arr.forEach((node, index) => {
indexMap.set(node.id, index)
node.children = [];
});
return arr.reduce((res, node, index, all) => {
if (node.parentId === 0) return [...res, node];
all[indexMap.get(node.parentId)].children.push(node);
return res;
}, []);
};
const treeToObject = (tree = [], result = {}) => {
tree.forEach(child => {
if (!child.expandable) {
result.push(child.item);
} else {
const childrenAllEmpty = child.children
.every(({ children }) => children.length === 0);
result[child.item] = childrenAllEmpty ? [] : {};
treeToObject(child.children, result[child.item]);
}
});
return result;
};
const buildTreeObject = (arr = []) =>
treeToObject(listToTree(applyRelationships(arr)));

main();
.as-console-wrapper { top: 0; max-height: 100% !important; }

原始响应

const main = () => {
useCases.forEach(({ data, params: { maxDepth }, expected }) => {
const actual = buildTreeObject(data, maxDepth);
console.log(JSON.stringify(actual) === JSON.stringify(expected));
console.log(actual);
});
};
const useCases = [{
data: [
{ item: "Risk Analysis", level: 0, expandable: true },
{ item: "Volatility", level: 1, expandable: true },
{ item: "Total", level: 2, expandable: false },
{ item: "Systematic", level: 2, expandable: false },
{ item: "Specific", level: 2, expandable: false },
{ item: "TaR (68%, 1 year)", level: 1, expandable: true },
{ item: "Total", level: 2, expandable: false },
{ item: "Systematic", level: 2, expandable: false },
{ item: "Specific", level: 2, expandable: false },
{ item: "VaR (95%, 2 weeks, Chebyshev)", level: 1, expandable: true },
{ item: "Total", level: 2, expandable: false },
{ item: "Systematic", level: 2, expandable: false },
{ item: "Specific", level: 2, expandable: false }
],
params : { maxDepth: 1 },
expected: {
"Risk Analysis": {
"Volatility": ["Total", "Systematic", "Specific"],
"TaR (68%, 1 year)": ["Total", "Systematic", "Specific"],
"VaR (95%, 2 weeks, Chebyshev)": ["Total", "Systematic", "Specific"]
}
}
}, {
data: [
{ item: "Risk Analysis", level: 0, expandable: true },
{ item: "Standard", level: 1, expandable: true },
{ item: "Active", level: 2, expandable: true },
{ item: "Volatility", level: 3, expandable: true },
{ item: "Contribution", level: 4, expandable: true },
{ item: "Total", level: 5, expandable: false },
{ item: "Systematic", level: 5, expandable: false },
{ item: "Specific", level: 5, expandable: false }
],
params: { maxDepth: 4 },
expected: {
"Risk Analysis": {
"Standard": {
"Active": {
"Volatility": {
"Contribution": [ "Total", "Systematic", "Specific" ]
}
}
}
}
}
}];
const applyRelationships = (data) => {
let levelStack = [], lastNode = null;
return data.map((curr, index) => {
const node = { ...curr, id: index + 1 };
if (levelStack.length === 0) {
levelStack.push({ level: node.level, parent: 0 });
} else {
const last = levelStack[levelStack.length - 1];
if (node.level > last.level) {
levelStack.push({ level: node.level, parent: lastNode.id });
} else if (node.level < last.level) {
levelStack.pop();
}
}
node.parentId = levelStack[levelStack.length - 1].parent;
lastNode = node;
return node;
});
};
const listToTree = (arr = []) => {
let indexMap = new Map();
arr.forEach((node, index) => {
indexMap.set(node.id, index)
node.children = [];
});
return arr.reduce((res, node, index, all) => {
if (node.parentId === 0) return [...res, node];
all[indexMap.get(node.parentId)].children.push(node);
return res;
}, []);
};
const treeToObject = (tree, maxDepth = 1, result = {}) => {
tree.forEach(child => {
result[child.item] = {};
if (child.level >= maxDepth) {
result[child.item] = child.children.map(({ item }) => item);
} else {
treeToObject(child.children, maxDepth, result[child.item]);
}
});
return result;
};
const buildTreeObject = (arr = [], maxDepth = 1) =>
treeToObject(listToTree(applyRelationships(arr)), maxDepth);

main();
.as-console-wrapper { top: 0; max-height: 100% !important; }

从角度材质树到JSON对象的转换器。

export class TodoItemNode {
children: TodoItemNode[];
item: string;
}
treeToObject(result: any, nodes: TodoItemNode[]): any {
for (const node of nodes) {
if (node.children && node.children.length > 0) {
let isArray = true;
for (const child of node.children) {
if (child.children && child.children.length > 0) {
isArray = false;
break;
}
}
if (isArray) {
result[node.item] = [];
for (const child of node.children) {
result[node.item].push(child.item);
}
} else {
result[node.item] = {};
this.treeToObject(result[node.item], node.children);
}
} else {
result[node.item] = null;
}
}
return result;
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium