I have a task of populating a table with data from a JSON file.
Take a look at the following code snippet:
<table>
<thead>
<tr>
<th *ngFor="let datakeys of listData[0] | keys">{{ datakeys }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let datavalues of listData | values">
<td>{{ datavalues.userId }}</td>
<td>{{ datavalues.id }}</td>
<td>{{ datavalues.title }}</td>
<td>{{ datavalues.body }}</td>
</tr>
</tbody>
</table>
The initial ngFor loop is responsible for displaying the table headings. The data is stored in datakeys.
The second ngFor loop contains the actual values.
Currently, you can see that the properties of datavalues are hardcoded.
What I am looking to achieve is to dynamically generate these properties based on the values held in datakeys.
Any suggestions on how to accomplish this?