Angular / Typescript display list from object in ngFor

Question

I am using angular 7 and I am displaying some data.

Here are the parts:

myData: any;

The content of myData is:

{
    "id" : "1",
    "name" : "Name 1",
    "stuff" : [ 
        {
            "cmd" : "something here"
        }, 
        {
            "cmd" : "something else here"
        }
    ]
}

Then is my app.component.html I have:

<ul class="code-editor-options-menu" *ngFor="let dat of myData">
  <li>
    <span>{{dat.name}}</span>
    <span aria-hidden="true">{{dat.stuff.cmd}}</span>
  </li>
</ul>

With this: {{dat.stuff.cmd}} I'm trying to list all of the items inside stuff.

How can I do that?

What is your myData? Is it a single JSON as you shown or is it actually an array of objects? — Tushar Walzade
– Tushar Walzade, Commented Apr 16, 2019 at 8:47

rmjoia · Accepted Answer · 2019-04-16 08:32:13Z

2

name is not part of stuff, so you cannot iterate

check this snippet: your example

component:

  myData = {
    "id": "1",
    "name": "Name 1",
    "stuff": [
      {
        "cmd": "something here"
      },
      {
        "cmd": "something else here"
      }
    ]
  }

view:

<ul class="code-editor-options-menu" *ngFor="let dat of myData.stuff">
  <li>
    <span>{{myData.name}}</span>
    <span aria-hidden="true">{{dat.cmd}}</span>
  </li>
</ul>

answered Apr 16, 2019 at 8:32

rmjoia

99812 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Angular / Typescript display list from object in ngFor

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