Can't get the value of an element in the screen(array of dictionaries)

Ionic Framework ionic-v3
1

Hi
I’m working on a project and I need to handle an array of dictionaries and show them on the screen , I was able to get the data from the API and print them in the console but I couldn’t handle them !
here is an example of a response :


[{"title":"test","desc":"testing","image_path":"uploads/8 (1).jpg58f214dcd4787.jpg"},{"title":"Bxbx","desc":"Bxbxbx","image_path":"uploads/image58f214e9a90a4.jpg"},{"title":"Bdbxb","desc":"Bdbxb","image_path":"uploads/image58f246021a065.jpg"}]

and here is the code of the html component :


<ion-list>
<ion-list-header>Menue</ion-list-header>
  <ion-item *ngFor="let it of menu">
    <ion-thumbnail item-left>
      <img src="url_to_api/"+{{it.image_path}}>
    </ion-thumbnail>
    <h2>{{it.title}}</h2>
    <p>{{it.desc}}</p>
  </ion-item>
</ion-list>

note : the array which hold the data is called : menu in the .ts file

2 
imageForItem(item): string {
  return 'url_to_api/' + item.image_path;
}

<img [src]="imageForItem(it)">
1 Like
3

Thanks I was desperate for 2 days because of this problem !
you’re the best!

1 Like
4

All I ask in return is that you come back here and do your best to help others.

5

I’ll do what I can to help