Array of object showing undefined duing ngOninit in angular 5

Question

Even when I am trying to access inside html like this, its also not giving any value

  <mat-nav-list>
      <a mat-list-item href="" *ngFor="let link of products"> {{ link.name }} </a>
   </mat-nav-list>

Here is my JSON

[{"id":215,"name":"Book ambulance","slug":"book-ambulance","permalink":"http://staging.drmedapp.com.cp-36.webhostbox.net/demo/product/book-ambulance/","date_created":"2018-02-24T08:31:01","date_modified":"2018-02-24T08:32:13","type":"simple","status":"publish","featured":false,"catalog_visibility":"visible","description":"","short_description":"","sku":"","price":"0","regular_price":"0","sale_price":"","date_on_sale_from":"","date_on_sale_to":"","price_html":"<span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#8377;</span>0.00</span>","on_sale":false,"purchasable":true,"total_sales":0,"virtual":false,"downloadable":false,"downloads":[],"download_limit":-1,"download_expiry":-1,"download_type":"standard","external_url":"","button_text":"","tax_status":"taxable","tax_class":"","manage_stock":false,"stock_quantity":null,"in_stock":true,"backorders":"no","backorders_allowed":false,"backordered":false,"sold_individually":false,"weight":"","dimen

Here is my .ts file, I updated the code but still getting error this.products is not defined.

import { Component, OnInit } from '@angular/core';
import {Headers, Http, RequestOptions, URLSearchParams} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import * as WC from 'woocommerce-api';
import { WooApiService } from 'ng2woo';
import * as CryptoJS from 'crypto-js';

@Component({
  selector: 'app-pcat',
  templateUrl: './pcat.component.html',
  styleUrls: ['./pcat.component.scss']
})
export class PcatComponent implements OnInit {
  WooCommerce: any;
  public products: any;
  data: any;
  public crypto: any;
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  constructor(private woo: WooApiService) {}

  public getALL(){
    this.woo.fetchItems('products')
      .then(products => {
         for(var i = 0; i < products.length; i++) {
            this.products.push(products[i])
         }
      })
      .catch(error => console.log(error));
    } 
  ngOnInit(): void  {
    this.getALL();
  }
}

score 2 · Accepted Answer · answered May 29 '18 at 01:31

2

I think you're the problem is your not assigning the returned value of getAll() function to your products array.

    public getALL(){
         this.woo.fetchItems('products')
           .then(products => {
              for(var i = 0; i < products.length; i++) {
                 this.products.push(products[i])
              }
           })
           .catch(error => console.log(error));
    }

answered May 29 '18 at 01:31

Jannomeister

621
4
23

can i see what's inside your .ts file? – Jannomeister May 29 '18 at 03:01
I added the .ts file in main question, please see – mjck May 29 '18 at 03:58
Did you confirmed that the `WooApiService` has a response? try to `console.log(products)` if it has response. then if you confirmed that it has a response, then try to change your `products` variable data type. to `public products: Array = []` then comeback to me if still no data received. – Jannomeister May 29 '18 at 04:04
also, try to move your `getAll()` function and place it after the `ngOnInit()` function. :) – Jannomeister May 29 '18 at 04:08
Thank you very much for quick response, its working now. – mjck May 29 '18 at 04:22
You can approved my answer to avoid duplication :) Thanks mate. – Jannomeister May 29 '18 at 04:25

score 1 · Answer 2 · answered May 31 '18 at 06:33

Looks the Products are loaded dynamically, when you make a API call. until API call finishes, the property products would be holding instillation value which is undefined for what you have done like below.

public products: any;

till products are loaded the template does not know this is an Array, that is where the template fails. now to fix initialize the property with empty array.

public products: any[] = [];

In short, looks this this is the problem of initialization.

Hope this helps

score 0 · Answer 3 · answered May 29 '18 at 01:26

0

You need to populate your products property to the current response

public getALL(){
    this.woo.fetchItems('products')
    .then(products => { this.products = products; })
    .catch(error => console.log(error));
}

answered May 29 '18 at 01:26

John Velasquez

3,421
2
18
23

Thank you for the response. – mjck May 29 '18 at 01:54

Array of object showing undefined duing ngOninit in angular 5

3 Answers3