Comment analyser JSON dans Ionic 2?

Question

Je suis nouveau dans le développement d'applications hybrides Ionic-2 et j'ai besoin d'analyser le JSON pour utiliser les services Web. Je ne suis pas en mesure d'obtenir une réponse du serveur. J'ai besoin d'extraire les données du serveur et de les afficher dans la page "Détails du produit". Ma structure JSON est

{ 
"id": 1, 
"product": "Gerbera", 
"product_type_id": 1, 
"description": "Gerbera L. is a genus of plants Asteraceae. It was named in honour of German botanist and medical doctor Traugott Gerber | who travelled extensively in Russia and was a friend of Carl Linnaeus.", 
"images": "http://factoryunlock.in/sundar/public/uploads/photos/07_17/1500965697_Growing-Gerbera-Flowers.jpg" } 

Mon code de fichier Home.ts ionique est:

import { Component } from '@angular/core'; 
    import { IonicPage, NavController, NavParams } from '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; 

     }); 
    } 

} 

Mon fichier home.html est:

<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> 

Mon code fournisseur est:

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

Capture d'écran de mon application:

Veuillez suggérer une solution. Je vous remercie.

Answer 1

Home.ts

public item: any = {}; 

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>