{
“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",
},
etc…
}
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">
<ion-item>
<h2>description of dd</h2>
<p>{{ item.dd}}</p>
</ion-item>
<ion-item>
<h2>description of aa</h2>
<p> {{ item.aa}}}</p>
</ion-item>
<ion-item>
<h2>description of bb</h2>
<p> {{ item.bb}}}</p>
</ion-item>
</ion-card>
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 https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'pageselctor',
templateUrl: 'pagename.html',
})
export class pagename {
public items:any;
constructor(public navCtrl: NavController, public http: HttpClient) {
this.getData();
}
getData(){
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
delete this code and try
*ngFor=“let item of items”
both of them are same right
