如何從Angular5和Ionic3中的json格式中檢索數據

Question

我正在嘗試從產品api獲取數據。 我從json文件中獲得響應，但是我不知道如何使用此數據在屏幕上打印所有產品名稱。

search.ts：

export class SearchPage {
  searchQuery: string = '';
  items: string[];
  data:object={};
  constructor(public navCtrl: NavController, private apiService: ApiService) {
     this.initializeItems();
  }

  initializeItems() {
    this.apiService.productsCall().subscribe(response => {
      //console.log(response);
      if(response['status'] == 200) {
        // console.log(response['response']);
        this.data=response['response'];
        console.log(this.data);
      } else if(response['status'] == 500) {
        console.log(response['error'].sqlMessage);

      }
    });
    this.items=[
      'Knee',
      'Knee Cap'
    ];

  }
}

search.html：

<ion-grid *ngFor="let item of items">
    <ion-row>
      <ion-col col-2>
        <img src='../assets/imgs/doctor.png'>
      </ion-col>
      <ion-col col-offset-1></ion-col>
      <ion-col col-9>
        Product name goes here
      </ion-col>
    </ion-row>
  </ion-grid>

json

{“狀態”：200，“錯誤”：空，“響應”：[{““產品ID”：1，“名稱”：“護膝”，“價格”：1290，“重量”：0.4，“ short_desc”： “頸痛緩解頸椎柔軟枕頭”，“ long_desc”：“非常適合側卧/后卧枕”，“ category_id”：3，“ units_in_stock”：8，“ units_on_order”：7，“ discount_available”：10，“ images”： “ images / Knee_Cap_1 .png”}，{“ product_id”：2，“ name”：“軟枕頭”，“ price”：1299，“ weight”：0.3，“ short_desc”：“頸痛緩解頸椎軟枕”， “ long_desc”：“完美的側卧/后卧鋪”，“ category_id”：1，“ units_in_stock”：10，“ units_on_order”：8，“ discount_available”：12，“ images”：null}，{“ product_id”：3 ，“名稱”：“腕托”，“價格”：250，“重量”：0.12，“ short_desc”：“拇指掌支撐最適合的Healthgenie腕帶”，“ long_desc”：“幫助緩解手腕酸軟或疼痛，舒適的壓力和保暖性，提供最高的舒適度”，“ category_id”：2，“ units_in_stock”：8，“ units_on_order”：7，“ discount_available”：10，“ images”：null}]}

Answer 1

請嘗試使用此代碼，也許會對您有所幫助。

<ion-grid *ngFor="let item of data">
<ion-row>
  <ion-col col-2>
    <img src='../assets/imgs/doctor.png'>
  </ion-col>
  <ion-col col-offset-1></ion-col>
  <ion-col col-9>
   {{item.name}}
  </ion-col>
</ion-row>

Answer 2

無需綁定到this.data您可以立即將響應映射到this.items並在視圖中使用它。

export class SearchPage {
  searchQuery: string = '';
  // make items hold everything about an item, not just the name
  items: any[];

  constructor(public navCtrl: NavController, private apiService: ApiService) {
     this.initializeItems();
  }

  initializeItems() {
    this.apiService.productsCall().subscribe(response => {
      //you might need response = JSON.parse(response) if it's still string format
      if(response.status == 200) {
         this.items = response.response;
      }
    }, error => {
        console.log("error occurred");
    });
  }
}

並在視圖中相應地打印項目名稱：

  <ion-grid *ngFor="let item of items">
    <ion-row>
      <ion-col col-2>
        <img src='../assets/imgs/doctor.png'>
      </ion-col>
      <ion-col col-offset-1></ion-col>
      <ion-col col-9>
        {{ item.name }} price: {{ item.price }} 
      </ion-col>
    </ion-row>
  </ion-grid>