CODEWITHSUNDEEP
htmlangularionic-frameworkionic3
user8531037
user8531037

Reputation:

Not able to assign Array to ngFor In Ionic, Showing Error

I am fetching product categories using API but the problem is that, I am fetching the categories as an object and I am not able to define them as an Array. To *ngFor to work in Ionic, The values should be in Array. Any help is much appreciated.

This is my product.html:

<ion-content no-padding>
  <ion-grid class="myproducts">
    <h1 class="myph11">Our Product Categories</h1>
    <ion-row align-items-center *ngFor="let pcat of categories?.msg?.cat[0]">
      <ion-col (click)="getproducts(1)">
        <img class="imgsection12" src="assets/imgs/dark-honey2.jpg" />
        <h4 class="mynewph22">{{pcat.category_name}}</h4>
      </ion-col>
      <ion-col>
        <img class="imgsection12" src="assets/imgs/eucalyptus-honey2.jpg" />
        <h4 class="mynewph22">Eucalyptus Honey</h4>
      </ion-col>
    </ion-row>
    <ion-row align-items-center>
        <ion-col>
          <img class="imgsection12" src="assets/imgs/light-honey3-2.jpg" />
          <h4 class="mynewph22">Light Forest Honey {{categories?.msg?.cat[0].category_name}}</h4>
        </ion-col>
        <ion-col>
            <img class="imgsection12" src="assets/imgs/organic-honey2-2.jpg" />
            <h4 class="mynewph22">Organic Honey</h4>
        </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. This is showing category {{categories?.msg?.cat[0].category_name}} but *ngFor is showing error.

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);
  });

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: Response) => {
      resolve(data);},
    err => {
    console.log(err);
    });
    });
  }

The problem is that, I am fetching categories as an Object but I want it as an Array. Any help is much appreciated.

Upvotes: 1

Views: 147

Answers (1)

Vinko Vorih
Vinko Vorih

Reputation: 2202

this.restProvider.getproductcategories()
      .then(data => {
      this.categories = data.msg.cat; <-- will do the trick
      console.log(this.categories);

and then in *ngFor you can use *ngFor="let category of this.categories"

if you beautify json you can see that response is one object with 2 attributes: status and msg, where msg contains array of cat objects

Upvotes: 2

Related Questions