如何从Angular5和Ionic3中的json格式中检索数据

Question

I am trying to fetch data from products api. I am getting the response from the json file but I don't know how to use this data for printing all the product names on the screen.

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

{"status":200,"error":null,"response":[{"product_id":1,"name":"knee cap","price":1290,"weight":0.4,"short_desc":"Neck Pain Relief Cervical Soft Pillo","long_desc":"Perfect for side/back sleepers","category_id":3,"units_in_stock":8,"units_on_order":7,"discount_available":10,"images":"images/Knee_Cap_1 .png"},{"product_id":2,"name":"soft pillow","price":1299,"weight":0.3,"short_desc":"Neck Pain Relief Cervical Soft Pillow ","long_desc":"Perfect for side/back sleepers","category_id":1,"units_in_stock":10,"units_on_order":8,"discount_available":12,"images":null},{"product_id":3,"name":"wrist brace","price":250,"weight":0.12,"short_desc":"Healthgenie Wrist Brace with Thumb Support One Size Fits Most","long_desc":"Helps relieve weak or sore wrist ,Comfortable pressure and body heat retention ,Provides the highest level of comfort","category_id":2,"units_in_stock":8,"units_on_order":7,"discount_available":10,"images":null}]}

Answer 1

Please try this code, maybe this will help you.

<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

Instead of binding to this.data you can map your response immediately to this.items and using it in your view.

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

And print the item names accordingly in the view:

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