Struggling to retrieve JSON data using the http client, but facing an error when trying to display it in the view:
NgFor only supports binding to Iterables such as Arrays
Upon inspecting the console.log output, I noticed that the data is an object containing other objects. https://i.sstatic.net/lE2Hp.png
This is my service code:
@Injectable()
export class DataService {
data: any;
constructor(private http: Http) {
this.data = null;
}
load() {
// Using Angular HTTP provider to fetch and map JSON data to a JS object.
// Further processing of data before resolving the promise with new data.
return this.http.get('http://localhost:3000/db') //json url
.map(res => res);
}
}
Below is the constructor from my page.ts where the data is being loaded :
constructor(private nav:NavController, navParams:NavParams, http:Http, public service:DataService) {
this.service.load().subscribe (
response => {
this.displayData=response;
console.log(this.displayData);
},
error => console.log ('error in download')
);
}
The ngfor loop in my page.html:
<ion-card *ngFor="let data of displayData">
</ion-card>
Here is the JSON retrieved from the localhost URL:
{
"0": {
"title": "Erreichbarkeit",
"items": [
{
"name": "1",
"value": "a"
},
{
"name": "2",
"value": "b"
},
{
"name": "3",
"value": "c"
}
]
},
"1": {
"title": "Erreichbarkeit 2",
"items": [
{
"name": "1",
"value": "g"
},
{
"name": "2",
"value": "f"
},
{
"name": "3",
"value": "e"
}
]
}
}
If anyone can pinpoint the issue, please help as it's becoming frustrating.