title: How to display JSON Array in a html table using *NgFor?
body: <p>I try to display data of an array from external JSON file to a html table. I manage to read the data at console logs, but I can't display the data. I'm still new with Angular 7, so I might miss something important during coding and I have no idea about it.</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/https';
  import { HttpErrorResponse } from '@angular/common/https';
  import { getRootView } from '@angular/core/src/render3/util';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    constructor (private httpService: HttpClient) { }
    parameter: string;
  
    ngOnInit () {
      this.httpService.get('./assets/fyp2019-ff11e-export.json').subscribe(
        data =&gt; {
          this.parameter = data as string;   // FILL THE ARRAY WITH DATA.
          console.log(this.parameter);    
        },
        (err: HttpErrorResponse) =&gt; {
          console.log (err.message);
        }
      );
    }
  </code></pre>
  
  <p><br></p>
  
  <p>Sample data from the json file:</p>
  
  <pre><code>{
    "GoogleSheet" : {
      "Data1" : {
        "LevelTankA" : 1.5,
        "LevelTankB" : 1,
        "MotorSpeed" : 15,
        "Time" : 1
      },
      "Data2" : {
        "LevelTankA" : 5,
        "LevelTankB" : 2.3,
        "MotorSpeed" : 15,
        "Time" : 2
      },
      "Data3" : {
        "LevelTankA" : 6,
        "LevelTankB" : 2.9,
        "MotorSpeed" : 20,
        "Time" : 3
      }
    }
  }
  </code></pre>
  
  <p><br></p>
  
  <p>a part of coding from component.html</p>
  
  <pre><code>  &lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;Tank A&lt;/th&gt;
                &lt;th&gt;Tank B&lt;/th&gt;
                    &lt;th&gt;Motor Speed&lt;/th&gt;
                        &lt;th&gt;Time&lt;/th&gt;        
        &lt;/tr&gt;
        &lt;!-- BIND ARRAY TO TABLE --&gt;
        &lt;tr *ngFor="let val of parameter; let i = index"&gt;   
      //prepare the key and grab the data key and values
      &lt;td *ngFor="let obj of val"&gt;{{obj.LevelTankA | json}}&lt;/td&gt;
      &lt;td *ngFor="let obj of val"&gt;{{obj.LevelTankB | json}}&lt;/td&gt;
      &lt;td *ngFor="let obj of val"&gt;{{obj.MotorSpeed | json}}&lt;/td&gt;
      &lt;td *ngFor="let obj of val"&gt;{{obj.Time | json}}&lt;/td&gt;           
        &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>I have no idea why I can't bind the array to html table. I try various coding using *ngFor and *ngIf but still can't display the data.</p>