How do I strip this JSON in Angular? - json

Question

I have a JSON, from which I need to strip down the name and position values of every subFolder to picture the folder structure from inside the JSON in a ngx-treeview in Angular.
I only want to have the subFolders, including the templates in the subFolders. Since the structure of the JSON object doesn't exactly match at all places and is not homogenous.
How do I dynamically push the subFolder values into the treeview (ngx-treeview) in the exact folder structure from the JSON?
The ngx-treeview JSON should look something like this:
templates = new TreeviewItem({
text: "Abrechnung",
value: 1,
children: [
{
text: "Fahrtkosten",
value: 11,
},
{
text: "Lohn",
value: 12,
},
],
});
My JSON:
{
"soap:Envelope": {
"soap:Body": {
"ns2:getTemplateTreeResponse": {
"return": {
"subFolders": {
"name": "Vorlagen",
"description": "",
"subFolders": {
"name": "VorlagenB",
"description": "",
"subFolders": [
{
"name": "Abrechnung",
"description": "",
"subFolders": [
{
"name": "Fahrtkosten",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenzusatz.template",
"description": "",
"metadata": ""
}
]
},
{
"name": "Lohn",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Gehaltsabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Lohnbescheid.template",
"description": "",
"metadata": ""
}
]
}
],
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenzusatz.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Gehaltsabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Lohnbescheid.template",
"description": "",
"metadata": ""
}
]
},
{
"name": "Datenschutz",
"description": "",
"subFolders": [
{
"name": "Datenschutzbeauftragter",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungHD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungXD.template",
"description": "",
"metadata": ""
}
]
},
{
"name": "Datenschutzerklärung",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungKD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungMA.template",
"description": "",
"metadata": ""
}
]
}
],
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungHD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungKD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungMA.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungXD.template",
"description": "",
"metadata": ""
}
]
},
{
"name": "Mitarbeiterinfos",
"description": "",
"subFolders": {
"name": "Urlaub",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Template.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantragbescheid.template",
"description": "",
"metadata": ""
}
]
},
"documentTypes": [
{
"fullName": "\\library\\MVP\\Template.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantragbescheid.template",
"description": "",
"metadata": ""
}
]
},
{
"name": "Sonstiges",
"description": "",
"subFolders": [
{
"name": "Freitext Briefe",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben1.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben2.template",
"description": "",
"metadata": ""
}
]
},
{
"name": "Rückfragen",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Testvorlage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\TestvorlageRgfrage.template",
"description": "",
"metadata": ""
}
]
}
],
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben1.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben2.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Testvorlage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\TestvorlageRgfrage.template",
"description": "",
"metadata": ""
}
]
},
{
"name": "Urlaub",
"description": "",
"subFolders": {
"name": "Urlaubsantrag",
"description": "",
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsanfrage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantrag.template",
"description": "",
"metadata": ""
}
]
},
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsanfrage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantrag.template",
"description": "",
"metadata": ""
}
]
}
],
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben1.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben2.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungHD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungKD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungMA.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungXD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenzusatz.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Gehaltsabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Lohnbescheid.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Template.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Testvorlage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\TestvorlageRgfrage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsanfrage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantrag.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantragbescheid.template",
"description": "",
"metadata": ""
}
]
},
"documentTypes": [
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben1.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Anschreiben2.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungHD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungKD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungMA.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\DatenschutzerklärungXD.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Fahrtkostenzusatz.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Gehaltsabrechnung.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Lohnbescheid.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Template.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Testvorlage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\TestvorlageRgfrage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsanfrage.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantrag.template",
"description": "",
"metadata": ""
},
{
"fullName": "\\library\\MVP\\Vorlagen\\Urlaubsantragbescheid.template",
"description": "",
"metadata": ""
}
]
}
}
}
}
}
}

Answer 1

#evilstiefel was faster than me but I'm with him. Sounds more like a data-transformation issue instead of an Angular one.
See a small StackBlitz sample to see my solution to the problem: https://stackblitz.com/edit/angular-basic-starter-fvewdw?file=src%2Fapp%2Fapp.component.ts

Answer 2

This sounds more like a data analysis problem than an Angular problem. Consider the following helper method that takes your data structure and returns an array which recursively populates a structure that has a folder-name, associated document types and, if present, an array of sub-folders:
const listName = (node: any, aggregate = []): any[] => {
let documentTypes = [];
if (node) {
if (node.documentTypes && node.documentTypes instanceof Array) {
documentTypes = node.documentTypes.map(docType => docType["fullName"]);
}
}
if (node.subFolders && node.subFolders instanceof Array) {
return aggregate.concat({
name: node.name,
documentTypes,
subFolders: node.subFolders.map(folder => listName(folder))
});
} else if (node.subFolders) {
return aggregate.concat({
name: node.name,
documentTypes,
subFolders: [listName(node.subFolders, aggregate)]
});
} else {
return aggregate.concat({ name: node.name, documentTypes, subFolders: [] });
}
};
const tree =
data["soap:Envelope"]["soap:Body"]["ns2:getTemplateTreeResponse"]["return"][
"subFolders"
];
const structure = listName(tree);
There might very well be a shorter version of this recursive function, but it should give you an idea of how to "destructure" your source JSON. Note that in my example, your json-data was loaded into the variable data.