typescript - I have a response coming from the server( JSON Response) Those contain image names -

stack overflow people, have data coming server images want display them under card view of application. kindly me out in displaying response

here code

home.ts

import { component } '@angular/core';  import { navcontroller, loadingcontroller} 'ionic-angular'; import {httpprovider} '../../providers/http-provider';  @component({   selector: 'page-home',   templateurl: 'home.html',   providers:[httpprovider] }) export class homepage {      newsdata: any;     loading: any;    constructor(public navctrl: navcontroller,private httpprovider:httpprovider,public loadingctrl: loadingcontroller)   {      this.loading = this.loadingctrl.create({   content: `   <ion-spinner ></ion-spinner>` });      this.getdata();   }  getdata(){   this.httpprovider.getjsondata().subscribe(     result => {       this.newsdata=result.data.image;       console.log("success : "+this.newsdata);       alert("data coming");     },     err =>{       console.error("error : "+err);     } ,     () => {       console.log('getdata completed');     }   ); }    } 

home.html

<ion-header> <ion-navbar> <ion-title> world news </ion-title> </ion-navbar> </ion-header>  <ion-content> <ion-card text-wrap *ngfor="let item of newsdata">    <ion-card-content padding>      <p>        {{item.image}}     </p>   </ion-card-content> </ion-card> </ion-content> 

http provider.ts

import { injectable } '@angular/core'; import { http } '@angular/http'; import 'rxjs/add/operator/map';   @injectable() export class httpprovider {    constructor(public http: http) {     console.log('hello httpprovider provider');   }    getjsondata(){   return this.http.get('stay-simple.co.nf/display.php').map(res => res.json()); }  } 

database table fields id, image, text

json response link:http://stay-simple.co.nf/display.php

kindly me out of project work