Angularjs2 show json like tree - json

Question

I create a json file like
{ "tests": { "CHE": { "Failover": [ "Standalone Box Restart" ],
"Smoke": [ "All Domains Are Published", "No FID Duplication", "PE and
RIC Mangling", "Real Time Updates - FTN", "Only One Response Message
Per Constituent", "LIVE-STANDBY-LIVE Switch" ] }, "Queries": {
"Queries": [ "Get Services For Region" ] } } }
How to show on the HTML like a tree really hurry up. Thank you
Like That:
enter image description here

Answer 1

You can try like this way.
First of all you need to create pipe using ng generate pipe testPipe (this will also import the dependency in app.module.ts file) for converting the object to array for looping through the elements.
test-pipe.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'keys'
})
export class TestPipePipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
In your template file place below mentioned code.
<div *ngFor="let item of data | keys">
<ul>
<li>
{{item.key}}
<ul *ngFor="let inItem of item.value | keys">
<li>
<input type="checkbox" name="">{{inItem.key}}
<ul *ngFor="let ininItem of inItem.value | keys">
<li>
<input type="checkbox" name="">{{ininItem.key}}
<ul *ngFor="let inininItem of ininItem.value | keys">
<li>
<input type="checkbox" name="">{{inininItem.value}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
in your component file you can right like.
data = { "tests": { "CHE": { "Failover": [ "Standalone Box Restart" ], "Smoke": [ "All Domains Are Published", "No FID Duplication", "PE and RIC Mangling", "Real Time Updates - FTN", "Only One Response Message Per Constituent", "LIVE-STANDBY-LIVE Switch" ] }, "Queries": { "Queries": [ "Get Services For Region" ] } } }