CODEWITHSUNDEEP
angulartypescript
user11310748
user11310748

Reputation:

Angular / Typescript display list from object in ngFor

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?

Upvotes: 1

Views: 9545

Answers (1)

rmjoia
rmjoia

Reputation: 980

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>

Upvotes: 2

Related Questions