How to retrieve data from a multi level object in Ionic 3? - arrays

Question

This page works likes the following. The user selects a product (C2, Coca Cola, etc.) then the prices from the different supermarket are supposed to be displayed. This is the object I created.
productPrices = [
{
name: "C2 Green Tea",
prices: [
{
smPrice: 19.15,
tsPrice: 19.25,
rbPrice: 19.10
}
],
stock: 50
},
{
name: "Coca Cola",
prices: [
{
smPrice: 21.50,
tsPrice: 21.45,
rbPrice: 24.50
}
],
stock: 50
},
{
name: "Nature's Spring",
prices: [
{
smPrice: 12.50,
tsPrice: 11.50,
rbPrice: 13.00
}
],
stock: 50
},
{
name: "Red Horse Beer",
prices: [
{
smPrice: 31.50,
tsPrice: 29.50,
rbPrice: 30.90
}
],
stock: 50
},
];
getProductPrice(product: string){
return this.productPrices.filter(item => item.name == product);
}
By using the getProducPrice() method, I'm able to get the product selected and its properties. But I can't get the value of the prices. What I have on the template page is this.
<div *ngFor="let itemPrice of productPrices">
<div *ngFor="let marketPrice of itemPrice.prices">
<form (ngSubmit)="onFormSubmit(userForm)" #userForm="ngForm" >
<ion-list>
<ion-list-header>
Supermarkets
</ion-list-header>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/ts.jpg">
</ion-thumbnail>
<p>{{marketPrice.tsPrice}}</p>
<button ion-button clear item-end (click)="onBuy()" >Buy</button>
</ion-item>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/sm.png">
</ion-thumbnail>
<p>{{marketPrice.smPrice}}</p>
<button ion-button clear item-end (click)="onBuy()"> Buy</button>
</ion-item>
<ion-item>
<ion-thumbnail item-start>
<img src="assets/grocery/market-logo/rb.jpg">
</ion-thumbnail>
₱<input name="price" value="{{marketPrice.rbPrice}}">
<p>{{marketPrice.rbPrice}}</p>
<button ion-button clear item-end (click)="onBuy()">Buy</button>
</ion-item>
<ion-item>
<ion-label>Enter Quantity</ion-label>
<ion-input type="number" min="0"></ion-input>
</ion-item>
</ion-list>
</form>
</div>
</div>
The problem with that is that if I use a form to submit, it'll submit all the values including the prices of the other supermarkets.
Is there a better way for me to loop from the object I received and access the prices values of each product? I'm not using a DB nor is this file saved in a json file. I just want to know if there's a better way to get values at the typescript file by using some methods. Thank you.

Answer 1

try this you will property of selected product
<div *ngFor="let item of productPrices">
<button (click) ="getProductPrice(item)">get</button>
</div>
In your ts file
getProductPrice(product: any){
console.log(product);
}