I want to implement a Angular material flat tree. I am new to reduce function and closure understanding the below method is also difficult for me. Can it be simplified I am using the below code to flatten a recursive tree. My tree look as below and I can rewrite the flattened code with level included. How do I incorporate level here. How can this be achieved, Please help.
[ {
"sectionIdent": "0/0",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 1",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": [{
"sectionIdent": "0/0/0",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 2",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": [],
"mainSection": true
},
{
"sectionIdent": "0/0/1",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 3",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": [{
"sectionIdent": "0/0/1/0",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 4",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": null,
"mainSection": true
}
],
"mainSection": true
}
],
"mainSection": true
}
];
I want it in the format like this
[{
...sectionTitle:"Timed exam section 1",
level:0
},
{
...sectionTitle:"Timed exam section 2",
level:1
},
{
...sectionTitle:"Timed exam section 3",
level:1
},
{
...sectionTitle:"Timed exam section 4",
level:2
},
]
Code:
buildFileTree(nodeArray: any, level: number): ExamSection[] {
return nodeArray.reduce(function recur(accumulator, curr) {
var keys = Object.keys(curr);
keys.splice(keys.indexOf('subExamSections'), 1);
accumulator.push(keys.reduce(function (entry, key) {
entry[key] = curr[key];
return entry;
}, {}));
if (curr.subExamSections && curr.subExamSections.length) {
return accumulator.concat(curr.subExamSections.reduce(recur, []));
}
return accumulator;
}, []);
}
CodePudding user response:
You can get the structure you are looking for with this:
function buildFileTree(tree = [], level = 0) {
return Array.prototype.concat
.apply(
tree.map(item => ({ ...item, level })), // Add 'level' property
tree.map(item => {
const subtree = item.subExamSections || []
const nextLevel = level 1
return buildFileTree(subtree, nextLevel) // Combine with sub-tree recursively
})
)
.map(({ sectionTitle, level }) => ({ sectionTitle, level })) // Extract the desired properties
}
CodePudding user response:
Concetp used :
...
Destructuring to add and remove properties,
Recussiong
: for looping,
map
to create new array,
foreach
to iteration.
let loop = (sections = [], flatSection = []) => {
if(sections) {
let editedShallowCopy = sections.map((s, i) => {
let { subExamSections , ...rest } = s; // destructure to remove property
return { ...rest, level: flatSection.length i 1 } // adding the new property
});
flatSection.push(...editedShallowCopy); // adding it flatSection
sections?.forEach(section => loop(section.subExamSections, flatSection)); // go in deeper levels of tree, Recussiong loop
}
return flatSection;
}
console.log(loop(tree))
let tree = [{
"sectionIdent": "0/0",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 1",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": [{
"sectionIdent": "0/0/0",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 2",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": [],
"mainSection": true
},
{
"sectionIdent": "0/0/1",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 3",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": [{
"sectionIdent": "0/0/1/0",
"examSectionID": "59f87638-a4ce-4861-81f9-562a887ba3e5",
"sectionTitle": "Timed exam section 4",
"sectionOrder": null,
"randomCount": null,
"mixContent": null,
"totalCount": 0,
"titleError": false,
"randomError": false,
"items": null,
"delNavInfo": null,
"subExamSections": null,
"mainSection": true
}
],
"mainSection": true
}
],
"mainSection": true
}];
let loop = (sections = [], flatSection = []) => {
if (sections) {
let editedShallowCopy = sections.map((s, i) => {
let {
subExamSections,
...rest
} = s; // destructure to remove property
return { ...rest,
level: flatSection.length i 1
} // adding the new property
});
flatSection.push(...editedShallowCopy); // adding it flatSection
sections.forEach(section => loop(section.subExamSections, flatSection)); // go in deeper levels of tree
}
return flatSection;
}
console.log(loop(tree))
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>