access array element inside array

Question

I am having data like this:

{"results":[{"id":65,"title":"rap god 3","rating":"9.0","genres":[{"id":14,"name":"New Genre"},{"id":550,"name":"bollywood"}]},{"id":68,"title":"bol naa","rating":"3.1","genres":[{"id":45,"name":"LOLOL"}]},{"id":69,"title":"rap god 2","rating":"2.0","genres":[]},{"id":70,"title":"last track","rating":"3.0","genres":[{"id":17,"name":"horror"}]},{"id":71,"title":"animalsssss","rating":"4.0","genres":[{"id":22,"name":"lol"}]},{"id":72,"title":"sanam re sanam re","rating":"3.0","genres":[{"id":10,"name":"surf excel"},{"id":16,"name":"Trancee"},{"id":21,"name":"indie-rockk"}]},{"id":73,"title":"testing data for genre","rating":"3.0","genres":[]},{"id":74,"title":"testing data for multi genre","rating":"2.2","genres":[]},{"id":75,"title":"hip hop","rating":"5.0","genres":[{"id":10,"name":"surf excel"}]},{"id":76,"title":"animals","rating":"3.0","genres":[{"id":12,"name":"bollywood"},{"id":17,"name":"horror"},{"id":18,"name":"india jeet bhai ppp"},{"id":21,"name":"indie-rockk"}]},{"id":77,"title":"bolly","rating":"2.0","genres":[{"id":21,"name":"indie-rockk"}]},{"id":78,"title":"sass","rating":"3.0","genres":[{"id":20,"name":"classical"}]},{"id":79,"title":"done","rating":"5.0","genres":[{"id":16,"name":"Trancee"}]},{"id":80,"title":"baskar","rating":"2.0","genres":[]},{"id":81,"title":"sass","rating":"5.0","genres":[{"id":22,"name":"lol"}]},{"id":82,"title":"ano 2","rating":"3.0","genres":[]},{"id":83,"title":"sanam re sanam re","rating":"3.2","genres":[]},{"id":84,"title":"sanam re sanam re","rating":"3.2","genres":[]},{"id":85,"title":"kuch na kho","rating":"4.0","genres":[{"id":10,"name":"surf excel"}]},{"id":86,"title":"sat sat","rating":"4.0","genres":[]}]}

Now I want to print the title ,genre and rating. The rating should be of the form of stars. Data having more than one genre, genre should be separated by | symbol. Example: rap god [New Genre|bollywood] rating as stars.

I have tried this but not getting the genre printed

  <li class="list-group-item" *ngFor="let item of tracks|filter:term">
      {{item.title}}
      <div *ngFor="let genre of tracks.genres">
      {{tracks.genres?.tracks.genres.name}}
    </div>

I am using angular 2 ..please help..

Tiep Phan · Accepted Answer · 2017-04-22 07:11:33Z

1

Angular does not come with filter pipe. And assume your tracks mean results like below:

const data = {
  "results": ...
}

and

tracks = data.results

now, your template look like this:

<li class="list-group-item" *ngFor="let item of tracks">
  {{item.title}}
  [
  <span *ngFor="let genre of item.genres; let lst = last;">
    {{genre?.name}}
    <ng-container *ngIf="!lst"><!-- if not last item, print | -->
      |
    </ng-container>
  </span>
  ]
</li>

demo: https://plnkr.co/edit/noaAJVEJqsz0FZivv7iz?p=preview

edited Apr 22, 2017 at 7:11

answered Apr 22, 2017 at 6:26

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mudit Maheshwari Over a year ago

i am just getting [] (empty) to right of the name. My Trackmodel.ts file is: export class TrackModel{ id:number; title:string; rating:number; genre:any; }

Tiep Phan Over a year ago

because your have empty genres in this data { "id":69, "title":"rap god 2", "rating":"2.0", "genres":[ ] },

Mudit Maheshwari Over a year ago

For every data i am getting the same result sir.{"id":65,"title":"rap god 3","rating":"9.0","genres":[{"id":14,"name":"New Genre"},{"id":550,"name":"bollywood"}]....expected output is rap god [NewGenre | bollywood]

Mudit Maheshwari Over a year ago

I am getting blank genre for each data

Tiep Phan Over a year ago

wait a minute.!

Collectives™ on Stack Overflow

access array element inside array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related