Vidit
January 5, 2018, 11:24am
1
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
Vidit
January 5, 2018, 12:02pm
3
@anna_liebt Thank you very much! It worked like a charm. Much Obliged.
Vidit
January 5, 2018, 12:09pm
4
@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
Vidit
January 5, 2018, 4:48pm
6
@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
Vidit
January 5, 2018, 5:29pm
9
@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
Vidit
January 6, 2018, 11:35am
11
@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