Looking to generate a school timetable table using dummy JSON data. The JSON object structure is as follows:
this._days=[
{
"day": "",
"config": {}
},
{
"day": "Monday",
"config": {
'timing': [
{'time': '9:00AM-10:00AM',
'schedule': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}
},
...
]
}
},...Want the table to dynamically adjust based on any changes in the JSON object size or structure. The ideal layout resembles a typical school timetable with days as headers and time slots down the left column. A basic hardcoded example has been created:
<table width="100%" align="center" height=100%;>
<tr class="day">
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
...
</tr>
<tr class="time">
<th>10:00 - 11:00</th>
...
</tr>
...
An attempt was made using Angular 2 (typescript) :
<div>
<table style="width:100%; height:200px;">
<tr>
<th *ngFor="let row of _days" style="background: grey; color:white">
<h3><b>{{row.day}}</b></h3>
</th>
</tr>
<tr *ngFor="let row of _days">
<td style="background: grey;color:white">
<h3><b>{{row.config.timing[row].time}}</b></h3>
</td>
</tr>
</table>
</div>
Need guidance on implementing this using JavaScript or Angular 2 (TypeScript). Thank you!