Problem with JSON Parse [HELP]

I am trying to list some products from a rest api call

home.ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import *as Woocommerce from 'woocommerce-api';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage  {

  woocommerce: any;
  products: any[];
  page: number;
  constructor(public navCtrl: NavController) {
    this.woocommerce = Woocommerce({
      url: 'http://bashfootwear.co.in',
      consumerKey: 'ck_xxxx',
      consumerSecret: 'cs_xxxx',
      wpAPI: true,
      version: 'wc/v2'
    });
    this.woocommerce.getAsync("products").then( (data) => {
      this.products=JSON.parse(data.body);
      console.log(this.products);
    }, (err) => {
      console.log(err)
    });  
  }
}

The console reads

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col *ngIf="products">
        <ion-card *ngFor="let product of products">
          <img src="http://bashfootwear.co.in/wp-content/uploads/2017/12/W3.jpg"/>
          <ion-card-content>
            {{product.name}}
          </ion-card-content>
        </ion-card>      
      </ion-col>
      <ion-col *ngIf="!products">
        <p>No Products.</p>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Expected Output : List of Products.

Output Recieved:

hello,
maybe it is a try worth to put filling with data in a later lifecyle. For example.

ngAfterViewInit() {
this.woocommerce.getAsync("products").then( (data) => {
      this.products=JSON.parse(data.body);
      console.log(this.products);
    }, (err) => {
      console.log(err)
    }); 
} 

Best regards, anna-liebt

1 Like

@anna_liebt Thank you very much! It worked like a charm. Much Obliged.

@anna_liebt Sorry, but again after a refresh it seems to give the same problem.

Hello,

it has worked? Great.
A second time again, it didn’t worked?

I have often problems with old Versions. That really anoy me.
Please stop cli, clear browser cache, delete content in www/build and .sourcemaps. Restart.

Failure is not gone?
Okay, maybe someone else has an idea.

Best regards, anna-liebt

@anna_liebt The products get loaded as I toggle the Menu

Hello,

that I understood you right.

console.log shows, products are available, then

First. The products never showed on Homescreen, also never showen when you tapped menu?

Second: after put method in ngAfterViewInit it was not showen in homePage, but you tapped menu and then it was shown in homepage?

Best regards, anna-liebt

Have a look at NgZone. You need to force update the view.

2 Likes

@samarthagarwal Thanks Once again! It Workerd

Hello,
maybe you have a little bit time. I’m a learner of ionic, angular, etc. stuff and so on

If you use ngzone and put the method back in constructor, is it then working as expected?

Best regards, anna-liebt

@anna_liebt
I took the update code and put it in a new method and called the method in the constructor:

 loadproduct(event){
    if(event == null){
      this.page=1;
      this.products = [];
    }
    else{
      this.page++;
    }
    this.WooCommerce.getAsync("products?page="+this.page).then( (data) => {
      this.zone.run(()=> {
        this.products = this.products.concat(JSON.parse(data.body));
        if(event!=null){
          event.complete();
        }
        if(JSON.parse(data.body).length < 10){
          event.enable(false);
        }
      })  
    }, (err) => {
      console.log(err)
    })
  }
1 Like

I’m having the exact same problem, could you please clarify for me what you did solve it