Как разобрать JSON в Ionic 2?

Я новичок в разработке гибридных приложений Ionic-2, и мне нужно проанализировать JSON для использования веб-сервисов. Я не могу получить никакого ответа от сервера. Мне нужно получить данные с сервера и отобразить их на «странице сведений о продукте». Моя структура 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());
    }

Скриншот моего приложения:

экран 1

Пожалуйста, предложите любое решение. благодарю вас.


person parag Kartpay    schedule 26.07.2017    source источник
comment
Пользователь item объект, подобный <img [src]="item.images" />   -  person hrdkisback    schedule 26.07.2017
comment
@hrdkisback Не работает. поскольку массива нет, как он может обнаружить элементы.изображения   -  person parag Kartpay    schedule 26.07.2017
comment
это не массив.. его объект item..item.images   -  person Suraj Rao    schedule 26.07.2017
comment
Если это массив, вы должны взять индекс, например item[i].images, но это json 0bject, поэтому он будет item.images.   -  person hrdkisback    schedule 26.07.2017
comment
проверьте http.get ответ в блоке подписки, правильный он или нет console.log(JSON.stringify(res));   -  person hrdkisback    schedule 26.07.2017
comment
вы можете предложить, отредактировав мой код ..   -  person parag Kartpay    schedule 26.07.2017
comment
Я отредактировал ваш код, проверьте вывод console.log("Response Data " + JSON.stringify(res)); в консоли браузера.   -  person hrdkisback    schedule 26.07.2017
comment
Пожалуйста, обратитесь к этому сообщению передача данных с одной страницы на другую для навигации в Ionic 2   -  person rahul patel    schedule 17.08.2017


Ответы (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>
person Swapnil Patwa    schedule 26.07.2017