Problem with JSON Parse [HELP]

@Vidit wrote:

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

Untitled.jpg1345x460 141 KB

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:

Opera Snapshot_2018-01-05_165409_localhost.png349x587 5.61 KB

Posts: 1

Participants: 1

Read full topic