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>

John · Accepted Answer · 2017-10-24 07:06:00Z

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, 2017 at 7:06

John

11.6k5 gold badges60 silver badges75 bronze badges

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

4 Comments

AVJT82 Over a year ago

Just curious about the upvotes, since this doesn't work? ;)

John Over a year ago

It seems the question has been edited after this answer was given. Old structure was {"projects": [ { "organization": { "projects": [{ "name": "Build" }] } }] }

AVJT82 Over a year ago

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

user8743396 Over a year ago

Thanks john but i saw ajt got the answer first. Anyway i upvoted you

AVJT82 · Accepted Answer · 2017-10-24 08:44:00Z

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, 2017 at 8:44

answered Oct 24, 2017 at 7:10

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

3 Comments

user8743396 Over a year ago

Thank you. But i also have description. I did this and it destroyed the view. <tr *ngFor="let project of projects"> <td *ngFor="let inner of project.organization.projects">{{ inner.name }}</td> <td *ngFor="let inner of project.organization.projects">{{ inner.description }}</td> </tr>

user8743396 Over a year ago

I have two inner projects and it puts beside the first project

AVJT82 Over a year ago

excuse me? Don't delete my code? I'm not following :D

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related