Struggling to showcase the data stored in an array from an external JSON file on an HTML table. Able to view the data through console logs, but unable to display it visually. Still navigating my way through Angular 7 and might be overlooking something crucial during the coding process without even realizing it.
app.component.ts
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 => {
this.parameter = data as string; // FILL THE ARRAY WITH DATA.
console.log(this.parameter);
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
}
Sample content extracted from the json file:
{
"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
}
}
}
section of code from component.html
<table>
<tr>
<th>Tank A</th>
<th>Tank B</th>
<th>Motor Speed</th>
<th>Time</th>
</tr>
<!-- BIND ARRAY TO TABLE -->
<tr *ngFor="let val of parameter; let i = index">
//prepare the key and grab the data key and values
<td *ngFor="let obj of val">{{obj.LevelTankA | json}}</td>
<td *ngFor="let obj of val">{{obj.LevelTankB | json}}</td>
<td *ngFor="let obj of val">{{obj.MotorSpeed | json}}</td>
<td *ngFor="let obj of val">{{obj.Time | json}}</td>
</tr>
</table>
Encountering difficulties with binding the array to the html table. Attempted various approaches using *ngFor and *ngIf, but the data remains elusive from displaying on the screen.