Print Json Data in HTML with Ionic/Angular

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!

Oussail · Accepted Answer · 2020-02-11 15:06:52Z

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

}

answered Feb 11, 2020 at 15:06

Oussail

2,30813 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oussail Over a year ago

You're welcome. To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.

AliF50 · Accepted Answer · 2020-02-11 14:59:23Z

0

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 !

answered Feb 11, 2020 at 14:59

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

1 Comment

cloude Over a year ago

thanks for help! but in my view doesn't happen nothing. PS. hahaha great team!

Cristopher Rosales · Accepted Answer · 2020-02-11 15:18:59Z

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

}

Collectives™ on Stack Overflow

Print Json Data in HTML with Ionic/Angular

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related