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: 
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);
       }
      );
    }

```

}
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);
       }
      );
    }

}

```