Read Object Name from Inside of Arrays and Objects Angular2/4

Question

I'm confused on how would i able to read the project.name inside of these arrays and object? I want to display the project.name, building project.description. small...? How can iterate it in the html table row? Here's what i've done below. Hope you guys can help

 {
  "token": "eyJ": [
    {
      "id": 1,
      "organization_id": 1,
      "created_at": "2017-10-24 05:06:37",
      "updated_at": "2017-10-24 07:38:24",
      "organization": {
        "id": 1,
        "name": "Malayss",
        "logo": "default.png",
        "created_at": "2017-10-24 10:54:51",
        "updated_at": "2017-10-24 10:54:51",
        "projects": [
          {
            "id": 1,
            "name": "House",
            "description": "Small",
            "organization_id": 1,
            "created_at": "2017-10-24 02:41:50",
            "updated_at": "2017-10-24 02:41:50",
            "material_projects": [
              {
                "id": 1,
                "material_id": 1,
                "project_id": 1,
                "quantity": 10,
                "unit": "pcs",
                "purchased": 0,
                "balance": 10,
                "created_at": "2017-10-24 02:42:14",
                "updated_at": "2017-10-24 02:42:14",
                "material": {
                  "id": 1,
                  "sku": "1320484",
                  "name": "Cement",
                  "created_at": "2017-10-24 02:41:22",
                  "updated_at": "2017-10-24 02:41:22"
                }
              }
            ],
            "project_services": [
              {
                "service_id": 1,
                "project_id": 1,
                "unit": "square feet",
                "created_at": "2017-10-24 02:42:14",
                "updated_at": "2017-10-24 02:42:14",
                "service": {
                  "id": 1,
                  "sku": "734676",
                  "name": "Cleaning",
                  "created_at": "2017-10-24 02:41:36",
                  "updated_at": "2017-10-24 02:41:36"
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

html

<tr *ngFor="let project of projects.organization">
                  <td *ngFor="let inner of projects">{{ inner.name }}</td>
</tr>

Answer 1

Your iteration should look like this:

<table>
  <ng-container *ngFor="let project of projects.projects"> 
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
    <tr *ngFor="let inner of project.organization.projects">
      <td>{{inner.name}}</td>
      <td>{{inner.description}}
    </tr>
  </ng-container> 
</table>

DEMO

Answer 2

I think you need to change it to this:

<tr *ngFor="let project of projects">
 <td *ngFor="let inner of project.organization.projects">{{ inner.name }}</td>
</tr>

First loop the projects, get the organization for each project, and loop the inner projects from the organization to get the name