Ionic 2 : Cannot display JSON response into view

Question

I'm trying to display a JSON response, but can't seem to display anything:

Response:

woo.service.ts:

getProducts() : Observable<any> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    return this._http.get(this._url+'products?'+'consumer_key='+this._ck+'&consumer_secret='+this._cs, {
      headers : headers
    }).map(res => res.json().items);
}

woo.ts:

  ngOnInit() {
      this._wooService.getProducts()
      .subscribe(
          response => this.response = response,
          error => console.log(error));
          this.isLoading = false;
  }

And finally the woo.html:

<ion-card-header class="cardHead" text-center>
    <h2 class="cardHeaderText">{{obj.products.title}}</h2>

      <p>Prix: {{obj.price_html}}</p>
</ion-card-header>

<ion-card-content>
    <img src="{{obj.images.src}}">
    <p class="cardBodyText">{{obj.description}}</p>
    <p>Tags: {{obj.tags}}</p>
    <p>Catégories: {{obj.categories}}</p>
</ion-card-content>

Anyone have an idea why I can't access with *ngFor="#obj of response"?

Answer 1

I think that you problem is here:

return this._http.get(this._url+'products?'+'consumer_key='+this._ck+'&consumer_secret='+this._cs, {
  headers : headers
}).map(res => res.json().products); // <-----

instead of:

return this._http.get(this._url+'products?'+'consumer_key='+this._ck+'&consumer_secret='+this._cs, {
  headers : headers
}).map(res => res.json().items);

according to your response payload.

A small note: you don't need to set a Content-Type header for your get request.