Below is the function found in the TypeScript file that retrieves data from an API:
.ts file
getMachineConfigsByid(id) {
this.machinesService.getMachineConfigById(id).subscribe((res) => {
if (res.status === 'success') {
this.configs = res.histories;
let data = _.groupBy(this.configs, 'config_type');
this.led = data.led;
} else {
this.toastr.error(res.message, 'Error !');
}
}, (err) => {
console.log(err);
});
}
Example of how the data from the led array looks like:
[
{
"id":37,
"machine_id":611,
"config_type":"led",
"description":{
"24v_led":true,
"12v_led":false,
"5v_led":false
},
"update_type":null,
"created_at":"2020-02-20T14:53:04.727+05:30",
"updated_at":"2020-02-20T14:53:04.727+05:30"
},
...
]
Now, to display this data stored in the led array in an HTML file with the following structure.
.html
<div *ngFor="let item of led">
<div class="mb-4 section-header-configuration">
<p class="mb-0"><b>LED Config</b>
<span class="float-right">
<p class="mb-0"><b>On : {{item?.created_at | date:'dd/MM/yyyy'}}</b></p>
</span>
</p>
</div>
<div>
<div class="mb-3 col-12">
<span class="mr-2 wdth-200">24 V LED:</span>
<span class="status d-inline-block">
{{item?.description?.24v_led ? 'Yes' : 'No' }}
</span>
</div>
</div>
</div>
However, it resulted in an error due to not being able to interpolate a string within an object starting with a digit:
core.js:7187 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Unexpected token 24, expected identifier or keyword at column 20 in [ {{item?.description?.24v_led ? 'Yes' : 'No' }} ] in ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48 (" <span class="mr-2 wdth-200">24 V LED:</span>
<span class="status d-inline-block">[ERROR ->]
{{item?.description?.24v_led ? 'Yes' : 'No' }}
</span>
</div>
"): ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48
...