Solution 1 :
the data
variable is of object
type and not an array
, so when you assign it to return this.posts = data
, this.posts
now becomes an object. You can do the following to make it into an array
this.posts = []
for(let key in data){
this.posts.push(data[key])
}
return this.posts
Solution 2 :
Replace your HTML with this:
<ion-list>
<ion-item *ngFor = "let post of posts | keyvalue" >
<ion-thumbnail>
<img src="http://127.0.0.1:8000/storage/{{ post.value.image }}" alt="have error" >
</ion-thumbnail>
<ion-label>{{ post.value.title }}</ion-label>
<p></p>
</ion-item>
</ion-list>
That’s it!
Problem :
i work in inoic 5 / angularjs project this app get data from api and display it
(1) this function to get data from api :
getProdects(){
this.categoryId = this.activatedroute.snapshot.params["id"];
console.log(this.categoryId);
this.presentLoading();
this.apiservice.getdate("posts/cat/5").subscribe(data => {
//this.posts = JSON.parse(data.data);
console.log(data);
this.loadingController.dismiss();
return this.posts = data;
})}
(1) and this html code :
<ion-list>
<ion-item *ngFor = "let post of posts" >
<ion-thumbnail>
<img src="http://127.0.0.1:8000/storage/{{ post.image }}" alt="have error" >
</ion-thumbnail>
<ion-label>{{ post.title }}</ion-label>
<p></p>
</ion-item>
</ion-list>
display this error in browser:
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
and array show like this :
{2: {…}, 3: {…}, 4: {…}}
2: {id: 4, title: "ثلاجة الجي 14 قدم", body: "ثلاجة علوية 14 قدم مكعب رمادي داكن", image: "images/KZbWKFnJgFR4njb97kZSblwa96zv367yUqXAttx9.jpeg", image2: "images/xbuSDXSq0XUCnPuZKTREJRr7Fkay6nMAnKpRuxcw.jpeg", …}
3: {id: 5, title: "ثلاجة توشيبا سعة 355 لتر", body: "ثلاجة توشيبا نوفروست سعة 355 لتر ، 2 باب لون سيلفر مزودة بيد دائرية", image: "images/ID4A1mK42KxSie6uZRkdMhmSXkOXy2uj7XkWJinm.jpeg", image2: "images/HEtOn8gqx60bfbpxR2i6qVNTHaLJtn7UfgiEtU53.jpeg", …}
4: {id: 6, title: "ثلاجة سامسوج بابين", body: "ثلاجة سامسوج بابين - نوفورست سيلفر", image: "images/U3ONmUmq8S3kMJZ4VgmVLWLOBAFlWugOkew7Ndx3.jpeg", image2: "images/NDGQLs0S1GNZlZkO8ZYIoW5034KXtctPRbuBJLen.jpeg", …}
__proto__: Object
Comments
Comment posted by Maxim Shoustin
Kind of you need to convert string to JSON, no? Try to do something like
Comment posted by Sébastien
@MaximShoustin Angular’s HTTP library by default trasforms response data with
Comment posted by Mahdi Zarei
did you try my solution?
Comment posted by Mahdi Zarei
@AbdoMograt Thank you, my friend. if one day you used Observables use ” | async” or ” | async | keyvalue” instead. and upvote the answer if possible.