0

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>
Erwin Darmawan
  • 47
  • 8

1 Answers1

2

You can use below below code

{{ element.Profile.current_job ? element.Profile.current_job.companyName : ''}}
dipendra
  • 261
  • 1
  • 3
  • 9
  • thx alot, this is exactly the answer !! can i know, why we need to use this syntax instead just element.Profile.current_job.companyName – Erwin Darmawan Jul 08 '20 at 07:26
  • 1
    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 – dipendra Jul 08 '20 at 07:32
  • 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 !!!!! – Erwin Darmawan Jul 08 '20 at 07:40