How to iterate for array content inside object with ngFor angular

Question

I have data returned from api with this format :

[
  {
    "game": "Among Us",
    "playTime": 5000,
    "genre": "Multiplayer",
    "platforms": [
      "PC",
      "Android"
    ]
  }
]

I'm showing it into bootstrap table, but the platforms content won't be displaying ! how to loop for it ?

<table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Game</th>
                <th scope="col" sortable="name">Genre</th>
                <th scope="col" sortable="area">Plateforms</th>
                <th scope="col" sortable="population">Total play time</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let game of topGamesUsers">
                <td>

                    {{ game.game }}
                </td>
                <td>{{ game.genre }}</td>
                <td>{{ game.plateforms }}</td>
                <td>{{ game.users }}</td>

            </tr>
        </tbody>
    </table>

should I store them into another variable or I can do this in html file ?

And if you want to actually loop it - just do ngFor="let platform of game.platforms" — tymeJV
– tymeJV, Commented Jun 3, 2021 at 12:27

jesvin palatty · Accepted Answer · 2021-06-03 13:09:25Z

1

You can show it as a comma separated string in the row by using =>

 <td>{{ game.platforms.join() }}</td>

answered Jun 3, 2021 at 13:09

jesvin palatty

3833 silver badges10 bronze badges

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

Comments

Jeremy Caney · Accepted Answer · 2021-06-03 18:52:58Z

0

You can try like this.

<td>
    <div *ngFor="let platform of game.platforms"></div>
</td>

edited Jun 3, 2021 at 18:52

Jeremy Caney

7,797115 gold badges58 silver badges87 bronze badges

answered Jun 3, 2021 at 13:12

Topcoder

11 silver badge5 bronze badges

4 Comments

Jeremy Caney Over a year ago

I've edited your answer to use block formatting, which is more readable for multi-line code samples. Please review to ensure that the formatting is correct. Notably, I removed the backticks around the asterisk, as I don't believe they're needed here, and were part of your effort to maintain correct formatting.

Topcoder Over a year ago

Thank you. I will follow your feedback.

Jeremy Caney Over a year ago

No problem. As you'll have noticed, I've edited a handful of your posts to improve clarity and formatting, which will hopefully improve their reception. I appreciate your contributions and eagerness to participate in the community; welcome.

Topcoder Over a year ago

cool. I gonna to be eagerness member of stackoverflow. :)

Collectives™ on Stack Overflow

How to iterate for array content inside object with ngFor angular

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related