En fait, je reçois ci-dessous les données du serveur.

{
"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": []
    }
  }
}

J'utilise la méthode POST avec Promise pour obtenir des données. Dans le réseau , j'ai obtenu JSON et également validé par JSONLint .

Mais si vous souhaitez imprimer dans la console, il a vu [objet objet] .

En fait, la question est de savoir comment analyser les données du dictionnaire.

Je souhaite afficher l'image de product_detail_image

Mon fichier .ts

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)
    });
  }
}

responseData = response ["data"] donc je n'ai pas besoin d'écrire ["data"] quand je vais chercher product_detail_image.

Mon fichier .html

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

Mais l'image ne s'affiche pas.

Vous avez une erreur en dessous:

ERREUR TypeError: Impossible de lire la propriété «non définie» de non définie

N'importe qui peut me guider dans la bonne direction où je vais mal?

MODIFIÉ: pour plus de clarté sur 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)
      })
    })
  }
1
Govaadiyo 16 avril 2018 à 09:33

3 réponses

Meilleure réponse

Merci @Suraj Rao pour votre commentaire.

Vous avez raison, cela se produit car la page est chargée avant d'obtenir les données du serveur.

Votre lien suggéré n'a donc pas fonctionné pour moi, mais j'ai trouvé une solution à partir du lien ci-dessous.

charger des données dans la vue avant de la charger

J'ai utilisé ngIf comme ci-dessous.

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

Et mon problème a été résolu.

1
Govaadiyo 18 avril 2018 à 09:56

As-tu essayé

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

2
Sourabh Chopade 16 avril 2018 à 10:19

Essaye ça

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

Ou essayez ceci dans votre contrôleur

this.dicProductDetail = responseData.data

Si vous faites ce qui précède, vous n'avez pas besoin de changer votre côté html

2
Ramesh Rajendran 16 avril 2018 à 07:02