Mohan Gopi Mohan Gopi - 2 months ago 9
JSON Question

How to access every object of array

I am facing a problem in accessing array of every object please take a look at my response structure.

{
"status": "1",
"status_text": "Success",
"current_page": 1,
"next_page": "0",
"previous_page": "0",
"total_page": 1,
"total_products": "5",
"data": {
"products": [
{
"product_id": "51",
"name": "Arm Rocker",
"description": "",
"meta_title": "arm rocker",
"meta_description": "",
"model": "AutoSpare",
"image": "http://192.168.1.6/opencart/image/catalog/demo/product/armRocker-200x200.jpg",
"options": [
{
"product_option_value_id": "45",
"name": "Bangalore Auto",
"quantity": "12",
"sku": "56876",
"price": "100.00",
"salesprice": "50"
},
{
"product_option_value_id": "51",
"name": "Hyderabad Auto",
"quantity": "23",
"sku": "56543",
"price": "200.00",
"salesprice": "60"
},
{
"product_option_value_id": "52",
"name": "Delhi Auto",
"quantity": "14",
"sku": "98767",
"price": "300.00",
"salesprice": "80"
}
]
},
{
"product_id": "57",
"name": "Avenger",
"description": "<p>Hi, This is for testing....</p>",
"meta_title": "avenger",
"meta_description": "",
"model": "AutoSpare",
"image": "http://192.168.1.6/opencart/image/catalog/demo/product/avengerDtsi-150x150.jpg",
"options": [
{
"product_option_value_id": "48",
"name": "Bangalore Auto",
"quantity": "68",
"sku": "978675",
"price": "200.00",
"salesprice": "150"
},
{
"product_option_value_id": "49",
"name": "Delhi Auto",
"quantity": "67",
"sku": "86757",
"price": "300.00",
"salesprice": "250"
},
{
"product_option_value_id": "50",
"name": "Hyderabad Auto",
"quantity": "54",
"sku": "98765",
"price": "400.00",
"salesprice": "350"
}
]
}
]
}


in the above json structure i have an data object in that i have an array of products i have two objects in that array


here catprodArray is the products array


each and every object has options array what i am trying to achive in html part is given below.

<div class="product" *ngFor="let category of catprodArray">
<div>{{category.image}}</div>
<ion-item>
<ion-label>price</ion-label>
<ion-select [(ngModel)]="price">
<ion-option value="f" *ngFor="let item of category.option[]">{{item.sku}}</ion-option>

</ion-select>
</ion-item>
</div>



in my ion-select opttions i am trying to access that options array but i am getting error like


browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Parser Error: Unexpected token ] at column 35 in [ngFor let item of category.option[]] in CategoryProductDetailsPage@105:33 ("-label>price</ion-label>
<ion-select [(ngModel)]="price">
<ion-option value="f" [ERROR ->]*ngFor="let item of category.option[]">{{item.sku}}</ion-option>

</ion-select>

Answer
<ion-option value="f" *ngFor="let item in category.product_id.option[]">{{item.sku}}</ion-option>

should be like this

<ion-option value="f" *ngFor="let item of category.product_id.option[]">{{item.sku}}</ion-option>

Update Try this-

<ion-option value="f" *ngFor="let item of category?.options">{{item.sku}}</ion-option>

we use ? (Elvis Operator) at the end of variable while fetching asynchronous data which is coming from some kind of web API or JSON by using this angular2 will prevent us from throwing any error when data is not available for view READ more here

Comments