Angular 5: Access JSON Object with Template Syntax

Question

I get the following JSON represantion from a web service

{
   "STAT": {
      "Total": 216,
      "Average": 2.9722222222222223
   },
   "PPRP": {
      "Total": 31494,
      "Average": 19.884390677589384
   }
}

Within my component I have the following code:

  rawOverview: any
  ngOnInit() {
    this.service.getPlcOverview().subscribe(
    data => {
      this.rawOverview = JSON.parse(JSON.stringify(data))
    },
    err => console.error(err),
    () => console.log('done loading foods')
 );
}

How can I access PPRP and STAT with template syntax?

I tried the following:

<table class="table table-dark">
    <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Tels with acks</th>
        </tr>
      </thead>
  <tbody>
    <tr>
      <th scope="row">PPRP</th>
      <td>{{rawOverview.PPRP?.Average}}</td>
    </tr>
  </tbody>
</table>

but I get an error in the console.

ERROR TypeError: Cannot read property 'PPRP' of undefined

Is it possible to access a JSON object in this way? Or do I have to create known objects which can access the values?

Move the question mark, so it's like this: {{rawOverview?.PPRP?.Average}}. Intially, rawOverview will be undefined, so adding the null safe operator will prevent the error — user184994
– user184994, Commented May 1, 2018 at 19:47
@tymeJV Because I get an error when I try it directly with data. JSON.parse needs a string representation. But I see now that I can assign data to my member variable directly. — Thomas Geulen
– Thomas Geulen, Commented May 1, 2018 at 21:12

user184994 · Accepted Answer · 2018-05-01 21:05:43Z

2

At the moment, because rawOverview is set asynchronously, it starts life undefined, which is causing your error.

If you move the question mark, it will perform a null safe check, which will prevent the error

<td>{{rawOverview?.PPRP?.Average}}</td>

Comments

Tiago Machado · Accepted Answer · 2018-05-01 20:11:41Z

1

Yes you can and should access it like this. in the HTML just do something like this:

<tr>
  <th scope="row">PPRP</th>
  <td>{{rawOverview.PPRP?.Average}}</td>
</tr>
    <tr>
  <th scope="row">STAT</th>
  <td>{{rawOverview.STAT?.Average}}</td>
</tr>

answered May 1, 2018 at 20:11

Tiago Machado

1704 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular 5: Access JSON Object with Template Syntax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related