title: Angular 5: Access JSON Object with Template Syntax
body: <p>I get the following JSON represantion from a web service</p>
  
  <pre><code>{
     "STAT": {
        "Total": 216,
        "Average": 2.9722222222222223
     },
     "PPRP": {
        "Total": 31494,
        "Average": 19.884390677589384
     }
  }
  </code></pre>
  
  <p>Within my component I have the following code:</p>
  
  <pre><code>  rawOverview: any
    ngOnInit() {
      this.service.getPlcOverview().subscribe(
      data =&gt; {
        this.rawOverview = JSON.parse(JSON.stringify(data))
      },
      err =&gt; console.error(err),
      () =&gt; console.log('done loading foods')
   );
  }
  </code></pre>
  
  <p>How can I access PPRP and STAT with template syntax?</p>
  
  <p>I tried the following:</p>
  
  <pre><code>&lt;table class="table table-dark"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
            &lt;th scope="col"&gt;Name&lt;/th&gt;
            &lt;th scope="col"&gt;Tels with acks&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th scope="row"&gt;PPRP&lt;/th&gt;
        &lt;td&gt;{{rawOverview.PPRP?.Average}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>but I get an error in the console.</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'PPRP' of undefined</p>
  </blockquote>
  
  <p>Is it possible to access a JSON object in this way?
  Or do I have to create known objects which can access the values?</p>