Not able to get the correct index for the array in Ionic

Question

I am fetching product categories from the API made in Laravel but when I am fetching the categories in HTML, it is showing error but In console, it is showing the categories values.

This is my Service: restapi.ts:

apiUrl3 = 'http://beegoodhoney.in/HoneyApi/category';

getproductcategories()
  {
    return new Promise(resolve => {

      var headers = new HttpHeaders();
      headers.append('Access-Control-Allow-Origin' , '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
      headers.append('Accept','application/json');
      headers.append('content-type','application/json');

    this.http.get(this.apiUrl3, {headers: headers}).subscribe(data => {
      resolve(data);},
    err => {
    console.log(err);
    });
    });
}

This is running Fine and I am using this service in my product page to get the product categories.

This is my product.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { ProductdetailsPage } from './../productdetails/productdetails';
import { CartPage } from './../cart/cart';

@IonicPage()
@Component({
  selector: 'page-product',
  templateUrl: 'product.html',
})
export class ProductPage {
  users: any;
  categories: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public restProvider: RestapiProvider) {
  this.getcategories();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProductPage');
  }

  getcategories()
  {
    this.restProvider.getproductcategories()
      .then(data => {
      this.categories = data;
      console.log(this.categories);
      });
  }
}

When I print the values in the console, It is showing the response but In the HTML, it is showing the error.

This is my product.html:

<h4 class="mynewph22">{{categories.msg?.cat[0].category_name}}</h4>

Error: Cannot read property 'cat' of undefined.

Response In Console:

{status: "success", msg: {…}}
msg:
cat: Array(4)
0: {id: "1", main_cat_id: "1", category_name: "Dark Honey", category_img: "http://beegoodhoney.in/uploads/categoriesdark-honey11.jpg", cat_desc: "testinggg"}
1: {id: "2", main_cat_id: "1", category_name: "Eucalyptus honey", category_img: "http://beegoodhoney.in/uploads/categorieseucalyptus-honey1.jpg", cat_desc: "testinggg"}
2: {id: "3", main_cat_id: "1", category_name: "Light Forest Honey", category_img: "http://beegoodhoney.in/uploads/categorieslight-honey3.jpg", cat_desc: "sssss"}
3: {id: "4", main_cat_id: "1", category_name: "Organic Honey", category_img: "http://beegoodhoney.in/uploads/categoriesorganic-honey2.jpg", cat_desc: null}
length: 4

The problem is that, when I am printing the product category In HTML, it is showing the error. Any help is much appreciated.

It is the same issue "Error: Cannot read property 'cat' of undefined." Your html is set before data is received and set in the variable — Suraj Rao, Jan 04 '19 at 09:41
@SurajRao. I have used the safe navigation after that It is not working. — , Jan 04 '19 at 09:55
you will need to debug.. what exactly do you get when you console log `this.categories.msg` ? — Suraj Rao, Jan 04 '19 at 09:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186180/discussion-between-raghav-and-suraj-rao). — , Jan 04 '19 at 10:01

score 0 · Accepted Answer · answered Jan 04 '19 at 09:37

0

That makes perfect sense as your html tries to reach a value that is not ready yet. Since you are using promise instead of observable, you need to condition your html by the availability of categories like so :

<h4 class="mynewph22" *ngIf="categories && categories.msg && categories.msg.cat && categories.msg.cat.length">{{categories.msg.cat[0].category_name}}</h4>

Angular will trigger a change detection when the object becomes available and show the data.

answered Jan 04 '19 at 09:37

Mehdi

2,263
1
18
26

Not working using *ngIf. It is showing some other error. The Problem is that, After loading the view it is setting the values, Thats why it cannot error is showing. – Jan 04 '19 at 10:05
Thanks For the Answer. – Jan 04 '19 at 10:37
you are welcome – Mehdi Jan 04 '19 at 10:53

Not able to get the correct index for the array in Ionic

1 Answers1