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
@rapropos What is the solution…how to solve this issue