ionic 3 [object object] not able to parse data

Question

Actually I'm getting below data from the server.

{
"status": 1,
"message": "Product Detail",
"data": {
    "product": {
        "product_id": "87",
        "product_name": "Decide A4-12",
        "product_price": "Rs. 199.00",
        "product_shortdescription": "FREE Delivery Portrait",
        "product_description": "FREE Delivery\r\nSize : A4\r\nPaper Quality : 170 gsm\r\nPackage ",
        "product_small_image": "https:\\xxxxxx\/p\/o\/pos_02_2.jpg",
        "product_detail_image": "https:\\xxxxxx\/p\/o\/pos_02_2.jpg",
        "gallery": [{
            "gallery_url": "https:\\xxxxxx\/p\/o\/pos_02_2.jpg"
        }],
        "is_in_stock": 1
    },
    "reviews": {
        "count": 0,
        "review": []
    }
  }
}

I'm using POST method with Promise for get data. In network I got JSON and also validated by JSONLint.

But if want to print in console then it saw [object Object].

Actually question is how to parse data of dictionary.

I want to display image from product_detail_image

my .ts file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ApiProvider, APIName } from '../../providers/api/api';

@IonicPage()
@Component({
  selector: 'page-productdetail',
  templateUrl: 'productdetail.html',
})
export class ProductdetailPage {

  dicProductDetail: any

  constructor(public navCtrl: NavController, public navParams: NavParams,
     public apiProvider: ApiProvider) {       
     this.wsForGetProductDetail(navParams.get("productID"))
  }

  wsForGetProductDetail(productID: String){
    this.apiProvider.wsPost(APIName.getProductDetailApi, "product_id="+productID).then( responseData => {      
       this.dicProductDetail = responseData
       console.log("DATA ==> " + this.dicProductDetail["product"])
    }, (err) => {
       alert(err)
    });
  }
}

Where responseData = response["data"] so I don't need to write ["data"] when I will fetch product_detail_image.

my .html file

<ion-content padding >
  <img [src]="dicProductDetail[product].product_detail_image">
</ion-content>

But image not get display.

Got below error:

ERROR TypeError: Cannot read property 'undefined' of undefined

Anybody can guide me on right direction where I'm going to wrong ?

EDITED: for more clear about wsPost()

wsPost(strAPIName, params){
    console.log("params : " + JSON.stringify(params))
    console.log("Api : " + this.baseURL+strAPIName)

    return new Promise((resolve, reject) => {
      this.http.post(this.baseURL+strAPIName, params, {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
      })
      .subscribe(response => {
        if(response["status"] == 1) {          
          resolve(response["data"])
        }
        else if(response["status"] == 2) {          
          alert(response["message"])  
        }
        else {
          alert("Something is going wrong please try again")  
        }
      }, (err) => {
        alert("Error: " + err.message)
      })
    })
  }

*"Where responseData = response["data"]"* ... where exactly are you doing this? It's not anywhere in the code you've shown. — JJJ, Apr 16 '18 at 06:37
Also, [object Object] is because of the string concatenation. Do `console.log(this.dicProductDetail.product)` to see the actual object. — JJJ, Apr 16 '18 at 06:38
@JJJ - NO getting same [object Object], BTW I updated for your first comment — Govaadiyo, Apr 16 '18 at 06:42
https://stackoverflow.com/questions/43840008/cannot-read-property-of-xxx-of-undefined is your issue — Suraj Rao, Apr 16 '18 at 07:09
Possible duplicate of [Cannot read property of 'xxx' of undefined](https://stackoverflow.com/questions/43840008/cannot-read-property-of-xxx-of-undefined) — Suraj Rao, Apr 16 '18 at 07:09
"product_small_image": "https:\xxxxxx\/p\/o\/pos_02_2.jpg" }],", — Melchia, Apr 16 '18 at 07:44
can you give me output of console.log(this.dicProductDetail); ? — Gauravbhai Daxini, Apr 16 '18 at 10:36

Ramesh Rajendran · Answer 1 · 2018-04-16T07:02:10.343

2

try this

<ion-content padding >
  <img [src]="dicProductDetail['data'].product.product_detail_image">
</ion-content>

or try this in you controller

this.dicProductDetail = responseData.data

if you do the above one, you don't need to change in your html side

edited Apr 16 '18 at 07:02

answered Apr 16 '18 at 06:52

Ramesh Rajendran

37,412
45
153
234

got ERROR TypeError: Cannot read property 'data' of undefined – Govaadiyo Apr 16 '18 at 07:00

Sourabh Chopade · Answer 2 · 2018-04-16T10:19:14.163

2

Did u try

console.log(JSON.stringify(data.product_detail_image))

edited Apr 16 '18 at 10:19

answered Apr 16 '18 at 10:13

Sourabh Chopade

498
5
13

Govaadiyo · Accepted Answer · 2018-04-18T09:56:10.227

Thanks @Suraj Rao for your comment.

You are right, It happens because page is loaded before get data from server.

So your suggested link did not work for me but I found solution from below link.

load data in the view before loading it

I used ngIf like below.

<ion-content padding >
<div *ngIf="dicProductDetail">
    <img [src]="dicProductDetail['product'].product_detail_image">
</div>

And my problem solved.

ionic 3 [object object] not able to parse data

3 Answers3