Ionic card view json data


“data1”: {
“dd”: “1”,
“aa”: “2”,
“bb”: “3”,
“ff”: “rr.png”,

"data2": {
    "dd": "5",
    "aa": "2",
    "bb": "4",
    "ff": "kk.png",
"data3": {
    "dd": "8",
    "aa": "2",
    "bb": "6",
    "ff": "jj.png",


how to display the above json data in cards as i cant get some perfect tutorials for the above type json … iam getting Object object errors…


to do this first you have to make the html page and add this code in ion-content

<ion-card *ngFor="let item of items" >

        <img [src]="item.ff">

          <h2>description of dd</h2>
          <p>{{ item.dd}}</p>
          <h2>description of aa</h2>
          <p> {{ item.aa}}}</p>

          <h2>description of bb</h2>
          <p> {{}}}</p>

and the ts file will be like this to get the content from your json file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '../../../node_modules/@angular/common/http';
import { Observable } from '../../../node_modules/rxjs/Observable';

 * Generated class for the pagename page.
 * See for more info on
 * Ionic pages and navigation.

  selector: 'pageselctor',
  templateUrl: 'pagename.html',
export class pagename {

  public items:any;
  constructor(public navCtrl: NavController, public http: HttpClient) {

    let url=JSONURL?_format=json';
    let data: Observable<any> = this.http.get(url);
    data.subscribe(result =>  {
      this.items = result;


dont forget to change the json url and page name and page selector

and it will be work


i got this error after doing the above one how to solve


delete this code and try
*ngFor=“let item of items”


both of them are same right