How to parse JSON in Ionic 2? -

i new in ionic-2 hybrid app development , need parse json use web services. not able response server. need fetch data server , display in "product details page". json structure

{ "id": 1, "product": "gerbera", "product_type_id": 1, "description": "gerbera l. genus of plants asteraceae. named in honour of german botanist , medical doctor traugott gerber | travelled extensively in russia , friend of carl linnaeus.", "images": "http://factoryunlock.in/sundar/public/uploads/photos/07_17/1500965697_growing-gerbera-flowers.jpg" } 

my ionic home.ts file code is:

 import { component } '@angular/core';     import { ionicpage, navcontroller, navparams } 'ionic-angular';     import { earthquakesprovider } from'../../providers/earthquakes/earthquakes'; @ionicpage() @component({   selector: 'page-details',   templateurl: 'details.html',   providers: [earthquakesprovider] }) export class detailspage {     // public datelist: array<object>;      item: any;      id: number;     constructor(public navctrl: navcontroller, public earthquakes: earthquakesprovider, public navparams: navparams) {           this.id = navparams.get('id');       }     ionviewdidload() {         this.getearthquakes(this.id); }     getearthquakes(id) {         this._earthquakes.loadearthquakesdetails(id).subscribe(res => {          this.item=res;          });     }   } 

my home.html file is:

<ion-header>   <ion-navbar>     <button ion-button menutoggle>       <ion-icon name="menu"></ion-icon>     </button>     <ion-title> product details</ion-title>   </ion-navbar> </ion-header>  <ion-content class="content-background">    <ion-list>     <button ion-item  style="background: #eee;border: 1px solid #888;height: 40px">        {{ " flower name :" + product }}       </button>      <ion-card >       <div class=" col-50">         <ion-item  style="width:100%">           <img [src]="images" />         </ion-item>       </div>       </ion-card>        <button ion-item text-wrap style="background: #eee;border: 1px solid #888">         <div class="item item-text-wrap">             {{" discription :" +  description }}  </div>        </button>        <ion-list> 

my provider code is:

loadearthquakesdetails(id) {         let headers = new headers();             headers.append('content-type', 'application/json');               headers.append('authorization', 'bearer ' + "eaku0hisytqjtkv2yabz6k1gvdk2tidfcemjut3nlnoejtrcngekhxrti972");         return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/${id}`,{headers: headers})             .map(res => res.json());     } 

screenshot of app:

please suggest solution. thank you.

home.ts

public item: = {}; 

home.html

    <ion-list>         <button ion-item style="background: #eee;border: 1px solid #888;height: 40px">          flower name:  {{item?.product}}         </button>         <ion-card>             <div class=" col-50">                 <ion-item style="width:100%">                     <img [src]="item?.images" />                 </ion-item>             </div>         </ion-card>          <button ion-item text-wrap style="background: #eee;border: 1px solid #888">             <div class="item item-text-wrap">               discription : {{ item?.description }}             </div>           </button>      </ion-list>