I have implemented a getReports method that utilizes my web API's get method to retrieve JSON formatted responses.
Step1
getReports() {
return this._http.get(this.url)
.map((response: Response) => response.json())
.catch(this.handleError);
}
Step2
In the constructor of my component class, I inject the complete service and subscribe to this.reports within ngOnInit.
constructor(private _reportService: GetReports) {
}
ngOnInit() {
this._reportService.getReports().subscribe(reports => this.reports = reports);
}
Upon checking the console, I observe an array containing 127 records. My challenge lies in efficiently traversing this JSON data within the component to display nested values.
Image description available here
For instance, expanding the above array reveals data structured as follows:
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 aim to extract all unique values for Key 1 across the 127 elements as shown above. Similarly, based on Key 1, I plan to identify distinct values under Key 3.
The objective is to retrieve all Key 3 values associated with Key 1 while avoiding duplicate entries.
While exploring resources like access key and value of object using *ngFor, I did not find a solution matching my requirements.
Your guidance on ways to effectively access or interpret nested JSON data in Angular would be highly appreciated.