title: How to populate an html table from angular http get that returns an array of JSON
body: <p>I have a service that returns an array of JSON objects that I am attempting to load into an html table.  The http get is returning data however the data will not load into the table.  I suspect I may have an issue with the data types I am using in my typescript code.  This code is logging no errors to the console.</p>
  
  <p>If I comment out the data table and add a new line with {{ myData }} the page displays "function values() { [native code] }"</p>
  
  <p><strong>my-data.component.html</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="jumbotron text-center"&gt;
      &lt;h1&gt;
        My Data
      &lt;/h1&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;app-loader [isLoading]="isLoading"&gt;&lt;/app-loader&gt;
      &lt;table class="table table-hover table-responsive" [hidden]="isLoading"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
              &lt;th scope="col" data-field="myData.fileName"&gt;File Name&lt;/th&gt;
              &lt;th scope="col" data-field="myData.index"&gt;Index&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>my-data.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { finalize } from 'rxjs/operators';
  
  import { MyService } from './my-service.service';
  
  @Component({
    selector: 'app-my-data',
    templateUrl: './my-data.component.html',
    styleUrls: ['./my-data.component.scss']
  })
  export class MyComponent implements OnInit {
    myData: any;
    isLoading: boolean;
  
    constructor(private myService: MyService) {}
  
    ngOnInit() {
      this.isLoading = true;
      this.myService
        .getMyData()
        .pipe(
          finalize(() =&gt; {
            this.isLoading = false;
          })
        )
        .subscribe((myData: any) =&gt; {
          this.myData = myData;
        });
    }
  }
  </code></pre>
  
  <p><strong>my-data.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { map, catchError } from 'rxjs/operators';
  
  const routes = {
    dataEndpoint: 'http://localhost:53452/api/data'
  };
  
  @Injectable()
  export class MyService {
    constructor(private httpClient: HttpClient) {}
  
    getMyData(): Observable&lt;any&gt; {
      return this.httpClient
        .cache()
        .get(routes.dataEndpoint)
        .pipe(
          map((body: any) =&gt; body.values),
          catchError(() =&gt; of('Error, could not load My Data'))
        );
    }
  }
  </code></pre>
  
  <p><strong>JSON Returned from get</strong></p>
  
  <pre><code>[{"fileName":"sometext.txt", "index": 1},{"fileName":"sometext2.txt", "index": 2}]
  </code></pre>