Loop through nested object in angular

Question

I want to loop through the the nested object.

"movieRating": {
"rate": [{ 
    "rating9": 9,
    "count9": 158
}, {
    "rating8": 8,
    "count8": 101
}, {
    "rating7": 7,
    "count7": 32
}, {
    "rating6": 6,
    "count6": 48
}, {
    "rating5": 5,
    "count5": 125
}],
"totalCount": 456}

This is my HTML file

<div *ngFor="let movie of movies" class="container">
    <table   class="table">
        <tbody>
            <tr >
                <th><img src="#"></th>
                <td >{{movie.movieRating.rating9}}</td>
            </tr>
        </tbody>
   </table>
</div>

If I try {{movie.movieRating.rating9}} this is not working. But {{movie.movieRating.totalCount}} works. Is there a way to get rating9 and count9.

Do yo want only 9 or others as well?

Adrita Sharma
– Adrita Sharma

2019-12-21 17:22:34 +00:00
Commented Dec 21, 2019 at 17:22 — Adrita Sharma
– Adrita Sharma, Commented Dec 21, 2019 at 17:22
Currently I am testing it only for count9 and rating9.

cryptosnoop
– cryptosnoop

2019-12-21 17:29:55 +00:00
Commented Dec 21, 2019 at 17:29 — cryptosnoop
– cryptosnoop, Commented Dec 21, 2019 at 17:29

C.OG · Accepted Answer · 2019-12-21 17:24:11Z

3

Rating9 is in position 0 of the rate array, so to access it you can use {{movie.movieRating.rate[0].rating9}}.

<div *ngFor="let movie of movies" class="container">
    <table   class="table">
        <tbody>
            <tr >
                <th><img src="#"></th>
                <td >{{movie.movieRating.rate[0].rating9}}</td>
            </tr>
        </tbody>
   </table>
</div>

answered Dec 21, 2019 at 17:24

C.OG

6,5373 gold badges24 silver badges41 bronze badges

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

Comments

ngShravil.py · Accepted Answer · 2019-12-21 17:32:36Z

0

movieRating has a property called rate, which is a list of ratings. So, it would be like movie.movieRating.rate[0].rating9.

But the HTML part what you have posted in this question will give only one row, that is rating9's row, then it's no use of looping. So generalise your rate object like below:

"rate": {
    "rating": 9,
    "count": 158
}

So It would be very easy to loop also in the future.. like below:

<div *ngFor="let rating of movies.movieRating.rate" class="container">
    <table   class="table">
        <tbody>
            <tr >
                <th><img src="#"></th>
                <td >{{rating}}</td>
            </tr>
        </tbody>
   </table>
</div>

answered Dec 21, 2019 at 17:32

ngShravil.py

5,0983 gold badges21 silver badges32 bronze badges

Comments

Prabath Udayanga · Accepted Answer · 2020-01-21 06:45:56Z

When accessing nested object array elements, first you have to loop through the main array in your case its "movies". Then you have to loop through the nested array called "rate" inside the movie object then you can access the rate values as follows.

Your nested array.

movies:[{
 "movieRating": {
   "rate": [{ 
     "rating9": 9,
     "count9": 158
    }, {
     "rating8": 8,
     "count8": 101
    }, {
     "rating7": 7,
     "count7": 32
    }, {
     "rating6": 6,
     "count6": 48
    }, {
     "rating5": 5,
     "count5": 125
    }],
   "totalCount": 456}
}]

Modified html code

<div *ngFor="let movie of movies" class="container">
    <table   class="table">
        <tbody>
            <tr *ngFor="let rate of movie.movieRating.rate" >
                <th><img src="#"></th>
                <td >{{movie.movieRating.rating9}}</td>
            </tr>
        </tbody>
   </table>
</div>

Collectives™ on Stack Overflow

Loop through nested object in angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related