JSON array displaying issue

I am not able to show using ngFor in front end
of this value

{"orderId":"5919930bbd9d5b6093b855ca","_id":"591ade3b07739320890249b5","GrandTotalAmount":26375,"productDetails":[{"productCatalogId":"58ff187cd753ba37ed752308","productName":"samrat","productModel":"smc","productVersion":"1.0","productLangauge":"English","productMrp":5275,"productDiscountPercent":0,"productDiscount":0,"productSalePrice":5275,"productQuantity":5,"productTotalAmount":26375,"_id":"591ade3b07739320890249b6"}]}

this is my service.ts code

getmycart(orderid){
      var headers = new Headers();
      headers.append('X-access-token',`${this.auth.getToken()}`);
      return new Promise((resolve) => {
          this.http.get(`${Contants.API_CARTPRODUCT+orderid}`,{headers:headers}).map(res=>res.json()).subscribe((data) => {
              this.result = data;
              resolve(this.result);

          })
      })

  }

this is my .ts code

 loadMycart(){
    let listnow = this.authuser.getmycart(this.orderId);
    console.log(listnow);
       listnow.then(data => {
       this.result=data;
       console.log(this.result);
         })
  }

this is my .html code

<ion-content padding>

  <div *ngFor="let j of result.productDetails">
    {{j.productName}}
    {{j.productName}}
    {{j.productVersion}}
    {{j.productLangauge}}
</div>
</ion-content>

Please don’t wrap your Http request inside a promise. Angulars Http already provides you with a good mechanism for dealing with async actions, i.e. rxjs subscribables. Your service should look more like this:

 getmycart(orderid){
      var headers = new Headers();
      headers.append('X-access-token',`${this.auth.getToken()}`);
      return this.http.get(`${Contants.API_CARTPRODUCT+orderid}`,{headers:headers}).map(res=>res.json());
  }

and your loadCart like this:

loadMycart(){
  this.authuser.getmycart(this.orderId).subscribe(
    (result) => {
      this.myService.result = data;
    },
    (err) => {
      console.error(err);
    },
    () => {
      // done fetching data
    });
}

EDIT: added return as @rapropos picked out. If loadMyCart is not in a service, you should change this.myService.result into this.result.

I fear getmycart() is missing a return on its last line, and (although it’s hard to say given what has been posted so far), I’m guessing that we’re wanting to assign to this.result instead of this.myService.result.

To OP: when you are looping across ngFor, always initialize that property to an empty array. Oh, and please don’t use property names like “data” and “result”. Make them provide some sort of meaning to somebody reading the code.

1 Like

@luukschoen thanks for ur replay
but i am facing issue while following ur code…
subscribe is showing error

property 'subscribe' does not exist on type promise<{}>

in data it shows

Cannot find name data

what does myservice do…?

i used return in service also still i am getting above errors

@rapropos I am getting the response

i am able to show data which is present inside productDetails array…
but not able to show GrandTotalAmount

*ngFor is working only for productDetails when is use in res…in this case GrandTotalAmount will be undefined

this.http.get(`${Contants.API_CARTPRODUCT+orderid}`,{headers:headers}).map(res=>res.json().productDetails()).subscribe((data) => {

when i remove productDetails() in res, then it gives this error

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

All arrays are objects, but not all objects are arrays.

@rapropos What is the solution…how to solve this issue