Here is an example of what my JSON data structure looks like:
{
"reportSections": [
{
"name": "...",
"display": true,
"nav": false,
"reportGroups": {
"reports": [
{
"name": "...",
"url": "reportLibrary.tableau",
"nav": true,
"params": {
"reportName": "clientRelationshipReport",
"reportTitle": "Client Relationship Report",
"reportUrl": "...",
"reportHeight": "4030px"
},
"filters": "clientName,brokerName,entity,budgetClass,practice,office"
}
]
}
}
]
}
Within the HTML file template in the component, I have the following code:
<li *ngFor = "let sectionName of reportNavJSONMain.reportSections">
<span> {{ sectionName.name }} </span>
<ul>
<li *ngFor="let report of sectionName.reportGroups.reports">
<a *ngIf="report.nav"> {{report.name}} </a>
</li>
</ul>
</li>
Below is a snippet of how the component method in component.ts appears:
//<irrelevant code>
....
getReports(): any {
new Promise((resolve,reject)=>{
resolve(
this.reportNavService.getJSONReportMain()
)
}).then((data)=>{
// console.dir(JSON.parse(JSON.stringify(data)));
this.reportNavJSONMain = JSON.stringify(data);
console.dir(this.reportNavJSONMain)
})
}
...
//<irrelevant code>
The service code used to retrieve the JSON data is as follows:
//....
public getJSONReportMain(): Promise<any> {
return this.http.get('...')
.toPromise()
.then((response: Response)=>{
//console.log(JSON.stringify(response.json()))
this.reportNavJSON = JSON.stringify(response.json());
return this.reportNavJSON;
}).catch((error: Response)=>{
return Observable.throw('Error');
});
}
// ....
In the component.ts file, despite initializing this.reportNavJSONMain as an object (or array), it always displays as an "Object" when logged with console.log() or console.dir(). Various methods like JSON.parse() and JSON.stringify() were attempted but did not solve the issue.
The main objective is to access reportSections from this.reportNavJSONMain, however, attempting
this.reportNavJSONMain.reportSectionsthis.reportNavJSONMain. Yet, both console.dir(this.reportNavJSONMain)console.log(this.reportNavJSONMain)