How to retrieve nested values after subscribing using angular and json data? - json

Question

I have created one getReports methods in which i am passing my web api get method and able to get the response in json format
Step1
getReports() {
return this._http.get(this.url)
.map((response: Response) => response.json())
.catch(this.handleError);
}
Step2
After this in my component constructor class i am injecting the complete service and under ngOnInit i am subscribing using this.reports.
constructor(private _reportService: GetReports) {
}
ngOnInit() {
this._reportService.getReports().subscribe(reports => this.reports = reports);
}
so in console i am getting the Array with 127 records.My problem is how i can traverse the json data in component so that i will show my nested values
enter image description here
for example while expanding above array i will get data in format of
0
Key 1:" abdef",
Key2 :[1,2,3 ]
key 3:['test','test2']
1
Key 1:" check",
Key2 :[1,2,3 ]
key 3:['test3','test2']
2
Key 1:" ghef",
Key2 :[1,2,3 ]
key 3:['test3','test2']
....
....
....
127
Key 1:" check",
Key2 :[1,2,3 ]
key 3:['test4','test3']
I need to retrieve array value which is collection of the 127 elements like i mentioned above for 0th element I have Key 1 which having value"abdef" .. so first i need to find all the distinct values for Key 1 in 127 elements similarly based on key 1 i need to find all the distinct values which is under Key 3
I need to retrieve all the values belonging to Key 3 based on key1 and also duplicate records will not come .
I went through the links like access key and value of object using *ngFor but it is not fulfilling my requirement.
SO it will be great help if i get the links and responses on How to retrieve or read the nested json data in angular

Answer 1

Get all distinct keys
var distinctKyes = reports.map((a) => a.key1).filter((item, pos, arr) => arr.indexOf(item) === pos);
Fetch all key3 based on key1(value ="abc")
var result = []
myarr.forEach((item) => {
if(item.key1 === "abc"){
result = result.concat(item.key3);
}
})
result = result.filter((item, pos) => result.indexOf(item) === pos);