Within this array, I have a collection of objects that contain properties for model and color. My goal is to present these objects in a table format, with individual access to the color values.
grp = [ {model: "CF650-3C", color: {Orange: 3, Black: 2} }, {model: "HD4533F", color: {Black: 2, Orange: 1} } ]
I've attempted to iterate over the array and display them in a table:
<table class="table table-striped" >
<thead>
<tr >
<th scope="col">Model</th>
<th scope="col">color</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let g of grp">
<tr >
<td>{{ g.model }}</td>
<td>{{ g.color | json }}</td>
</tr>
</ng-container>
</tbody>
The output currently displays both models with their respective color values as JSON objects. However, I am struggling to individually access the keys and values within the colors object.
CF650-3C { "Orange": 3, "Black": 2 }
HD4533F { "Black": 2, "Orange": 1 }