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>

score 2 · Answer 1 · answered Oct 24 '17 at 07:06

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

answered Oct 24 '17 at 07:06

John

10,165
5
55
71

Just curious about the upvotes, since this doesn't work? ;) – AT82 Oct 24 '17 at 07:56
It seems the question has been edited after this answer was given. Old structure was `{"projects": [ { "organization": { "projects": [{ "name": "Build" }] } }] }` – John Oct 24 '17 at 08:08
yes, seems it has changed actually, so _now_ your answer is correct :) But when you got your upvotes the iteration should have been `let project of projects.projects`, so back then it wasn't correct :P – AT82 Oct 24 '17 at 08:18
Thanks john but i saw ajt got the answer first. Anyway i upvoted you – Oct 24 '17 at 09:16

AT82 · Accepted Answer · 2017-10-24T08:44:00.650

0

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

edited Oct 24 '17 at 08:44

answered Oct 24 '17 at 07:10

AT82

71,416
24
140
167

Thank you. But i also have description. I did this and it destroyed the view. {{ inner.name }} {{ inner.description }} – Oct 24 '17 at 07:23
I have two inner projects and it puts beside the first project – Oct 24 '17 at 07:26
excuse me? Don't delete my code? I'm not following :D – AT82 Oct 24 '17 at 07:55

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

2 Answers2