如何解析离子2中的JSON？

我是Ionic-2混合应用程序开发中的新成员，需要解析JSON以使用Web服务。我无法从服务器获得任何响应。我需要从服务器获取数据并将其显示在“产品详细信息”页面中。我的JSON结构被如何解析离子2中的JSON？

{ 
"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" }

我离子Home.ts文件中的代码是：

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; 

     }); 
    } 

}

我home.html的文件是：

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

我提供的代码是：

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

我的应用程序的屏幕截图：

请提出任何解决方案。谢谢。

来源

2017-07-26 parag Kartpay

用户'item'对象像'' – hrdkisback

@hrdkisback不工作。因为没有数组，所以它怎么会检测items.images –

其不是数组..它的对象'item'..'item.images' –

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>

来源

2017-07-26 10:37:19

非常感谢你。先生 –

如何解析离子2中的JSON？

回答

相关问题