How to display nested array elements using NgFor in angular?

Question

I have an array of objects,

movies = [
    {
    "_id": "61581aa12bee6cbe7b453d1d",
    "movie_title": "Master",
    "genres_list": [
    "Drama"
    ]
    },
    {
    "_id": "615c7f5fbc3bf7d026ee7f7e",
    "movie_title": "Sarpatta Parambarai",
    "genres_list": [
    "Drama",
    "Action",
    "Sports"
    ]
    },
    {
    "_id": "616d57c5653c0a4a55d9cb33",
    "movie_title": "OK Kanmani",
    "genres_list": [
    "Romance",
    "Drama",
    "Feel Good"
    ]
    }]

I want to display all the genres_list .

My code:

<div *ngFor="let movie of movies">
<span>{{movie.movie_title}}</span>
<div *ngFor = "let genre of movie.genres_list; let i=index">
<h2>{{genre[i]}}</h2>
</div>
</div>

I want to display all the genres_list values. Thank you :)

SP de Wit · Accepted Answer · 2021-10-19 09:36:35Z

2

Just use <h2>{{genre}}</h2> in your html. Doing {{genre[i]}} is essentially treating the genre string as a character array and only prints out a single character of the string at index i.

answered Oct 19, 2021 at 9:36

SP de Wit

2151 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

How to display nested array elements using NgFor in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related