title: Displaying nested JSON from REST API in table
body: <p>I'm having trouble with displaying nested JSON data that I got from my backend server in table.</p>
  
  <p>Here is my JSON:</p>
  
  <pre><code>{
    "id": 1,
    "personalData": {
      "firstName": "Bob",
      "lastName": "Bobby",
      "personalIdNumber": 852963
    },
    "email": "bobbybob@bob.com",
    "correspondenceAddress": {
      "addressLine1": "Sesame Street",
      "addressLine2": "1",
      "addressLine3": "2",
      "city": "Disney",
      "province": "Cartoons",
      "zipCode": "01-234"
    },
    "companyId": 265385,
    "active": true
  }
  </code></pre>
  
  <p>I want to display in table <strong>firstName</strong>, <strong>lastName</strong>, <strong>email</strong>, <strong>companyId</strong> and <strong>active</strong> fields from above.</p>
  
  <p>Here is my get method from class:</p>
  
  <pre><code>getData(): void {
      this.service.getAll()
        .subscribe((data) =&gt; {
            this.dataList = data;
          },
          error =&gt; console.log(error)
        );
    }
  </code></pre>
  
  <p>and table HTML:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
        &lt;table class="table" *ngIf="dataList &amp;&amp; dataList"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;First name&lt;/th&gt;
            &lt;th&gt;Last name&lt;/th&gt;
            &lt;th&gt;E-Mail&lt;/th&gt;
            &lt;th&gt;Company ID&lt;/th&gt;
            &lt;th&gt;Active?&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr *ngFor="let data of dataList"&gt;
            &lt;td&gt;{{data.firstName}}&lt;/td&gt;
            &lt;td&gt;{{data.lastName}}&lt;/td&gt;
            &lt;td&gt;{{data.email}}&lt;/td&gt;
            &lt;td&gt;{{data.companyId}}&lt;/td&gt;
            &lt;td&gt;{{data.active ? "True" : "False"}}&lt;/td&gt;
            &lt;td&gt;
              &lt;button class="btn btn-primary" (click)="openDetails()"&gt;Details&lt;/button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>PersonalData and CorrespondenceAddress is never going to be a list. How can I easily read it and display in table?</p>