Как получить данные из формата json в Angular5 и Ionic3
Я пытаюсь получить данные из 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.info(response);
if (response['status'] == 200) {
// console.info(response['response']);
this.data=response['response'];
console.info(this.data);
} else if (response['status'] == 500) {
console.info(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}]}
Если возможно, опубликуйте свой JSON
Это может помощь
Ответы 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>
да, но как получить доступ к этому элементу. имя. У меня есть множество продуктов. Мне нужно напечатать все названия продуктов.
* ngFor = "let item of data" ngFor применяется к данным, которые являются объектом массива. Затем после каждой итерации {{item.name}} будет печатать название продукта.
Вместо привязки к 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.info("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>
Вы получаете "данные" из службы и используете "элементы" в представлении? <ion-col col-9> {{item}} </ion-col>