Print Json Data in HTML with Ionic/Angular - json

Question

I'm building an app with IONIC Angular, and I'm trying to print the result in HTML.
From console.log it works correctly, but from the view I can't get the data printed
json api
{
"matches1": {
"homeTeam": "Barcellona",
"awayTeam": "Real Madrid",
},
"matches2": {
"homeTeam": "PSG",
"awayTeam": "Lione",
}
}
home.page.ts
export class HomePage {
matches1: any;
homeTeam1: any;
awayTeam1: any;
result1: any;
private apiurl = 'https://myapi.xxx';
constructor(private httpService: HttpClient) {
this.getdata();
}
getdata() {
this.httpService.get(this.apiurl).subscribe(res => {
this.item = res['matches1']['homeTeam'];
console.log(this.item); <-- this work in console log
}, (err: HttpErrorResponse) => {
console.log (err.message);
}
);
}
}
home.page html
<ion-item *ngFor="let item of items">
{{item.homeTeam}}
</ion-item>
thanks!

Answer 1

This should do the work :
export class HomePage {
matches1: any;
homeTeam1: any;
awayTeam1: any;
result1: any;
items: any;
private apiurl = 'https://myapi.xxx';
constructor(private httpService: HttpClient) {
this.getdata();
}
getdata() {
this.httpService.get(this.apiurl).subscribe(res => {
this.items = Object.keys(res).map(function(key, index) {
return res[key];
});
}, (err: HttpErrorResponse) => {
console.log (err.message);
}
);
}
}

Answer 2

I like to use the json pipe (https://angular.io/api/common/JsonPipe), try this:
<pre>{{ items | json }}</pre>
Edit:
In your case, it might be item | json. Also, Hala Madrid !

Answer 3

You need to declare item in your Controller, and you can't use ngFor if your item is not a list. Right now your json is NOT returning an array, so if you can, it would be best to make it into a list of matches.
Your Json would look better if it was something like this:
{
"matches": [
{
"homeTeam": "Barcellona",
"awayTeam": "Real Madrid",
},
{
"homeTeam": "PSG",
"awayTeam": "Lione",
}
]
}
This way you can easily iterate through your list of matches in your controller
export class HomePage {
matches1: any;
homeTeam1: any;
awayTeam1: any;
result1: any;
item: string[]:
private apiurl = 'https://myapi.xxx';
constructor(private httpService: HttpClient) {
this.getdata();
}
getdata() {
this.httpService.get(this.apiurl).subscribe(res => {
res["matches"].forEach(match => this.item.push(match["homeTeam"]));
}, (err: HttpErrorResponse) => {
console.log (err.message);
}
);
}
}