how to displaying data inside nested object in angular material table

Question

what should i do for diplaying the data of company name, because idk why its show undefined. i think i do it in correct way because its object, so what i need is just use "." but when i trying to show company name, data of (name, birthdate,city, etc) are gone but if im trying to showing "element.profile.current_job" its displaying [object OBJECT] and the these (name, birthdate,city, etc) data is still dispalyed.

JSON File

{
  "Profile": {
    "name": "John",
    "birthDate": "2020-07-03 00:00:00.000",
    "city": "L.A",
    "current_job": {
      "companyName": "Company",
      "position": {
        "positionName": "Manager",
        "time": {
          "start": "2020-07-03 00:00:00.000",
          "till": "2020-07-03 00:00:00.000"
        }
      }
    },
    "gender": "Female",
    "status": "Single"
  }
}

HTML

//1 success show [object OBJECT]
<ng-container matColumnDef="companyName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Company Name</th>
    <td mat-cell *matCellDef="let element">
       {{ element.Profile.current_job }}
    </td>
</ng-container>

//2 failed "Cannot read property 'companyName' of undefined"
<ng-container matColumnDef="companyName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Company Name</th>
    <td mat-cell *matCellDef="let element">
       {{ element.Profile.current_job.companyName }}
    </td>
</ng-container>

//3 success show L.A 
<ng-container matColumnDef="city">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>City</th>
    <td mat-cell *matCellDef="let element">
        {{ element.Profile.city }}
    </td>
</ng-container>

dipendra · Accepted Answer · 2020-07-08 07:02:16Z

2

You can use below below code

{{ element.Profile.current_job ? element.Profile.current_job.companyName : ''}}

answered Jul 8, 2020 at 7:02

dipendra

2611 gold badge3 silver badges9 bronze badges

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

3 Comments

Erwin Darmawan Over a year ago

thx alot, this is exactly the answer !! can i know, why we need to use this syntax instead just element.Profile.current_job.companyName

dipendra Over a year ago

As per error, element.Profile.current_job is undefined at the start of component and it is dynamically updates value for current_job. So, when current_job is undefined and it reach to {{element.Profile.current_job.companyName}}, it tries to access a variable from undefined variable. So we need to add condition that, if element.Profile.current_job is defined, then only show element.Profile.current_job.companyName

Erwin Darmawan Over a year ago

i see, i see ,thank you sir.. so when i trying to get time.start, i just need to implent same method too.. its help me a lot,, im trying to search these kind of problem, but there's no same case (nested object)like me. so once agian, THANK YOU !!!!!

Collectives™ on Stack Overflow

how to displaying data inside nested object in angular material table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related