Как извлечь данные из формата JSON в Angular5 и Ionic3

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": "коленная чашечка", "price": 1290, "weight": 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": "Perfect for side / backSleep "," 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 с поддержкой большого пальца одного размера больше всего подходит", "long_desc": "Помогает облегчитьСильное запястье, комфортное давление и сохранение тепла тела, обеспечивает наивысший уровень комфорта "," category_id ": 2," units_in_stock ": 8," units_on_order ": 7," discount_available ": 10," images ": null}]}

Answer 1

Вместо привязки к 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>

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>