如何在 Angular 5 和 Ionic 3 中从 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

{"status":200,"error":null,"response":[{"product_id":1,"name":"knee cap","price":1290,"weight":0.4,"short_desc":"颈部疼痛缓解颈椎 Soft Pillo","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":"soft 枕头","价格":1299,"重量":0.3,"short_desc":"颈部疼痛缓解 颈椎软枕 ","long_desc":"非常适合侧面/背面 sleepers","category_id":1,"units_in_stock":10,"units_on_order":8,"discount_available":12,"images":null},{"product_id":3,"name":"wrist 支架","价格":250,"重量":0.12,"short_desc":"Healthgenie 手腕支架 拇指支撑 一种尺寸最适合","long_desc":"帮助缓解虚弱 或手腕酸痛，舒适的压力和身体保温，提供 的最高水平 Comfort","category_id":2,"units_in_stock":8,"units_on_order":7,"discount_available":10,"images":null}]}

Answer 1

您可以立即将您的回复映射到this.items 并在您的视图中使用，而不是绑定到this.data。

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>

Answer 2

请试试这个代码，也许这会对你有所帮助。

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