I'm dealing with JSON data that includes employee names and salaries over multiple days (1-5). My goal is to display this information in an HTML table using AngularJS, mimicking the layout of the required table below.
JSON Data:
[{
name: "John",
salaryBreakdown: [{
day: 1,
salary: 32
}, {
day: 2,
salary: 40
}, {
day: 5,
salary: 105
}
]
}, {
name: "Nick",
salaryBreakdown: [{
day: 1,
salary: 27
}, {
day: 4,
salary: 82
}
]
}, {
name: "Bob",
salaryBreakdown: [{
day: 2,
salary: 55
}, {
day: 3,
salary: 80
}
]
}
]
Required Table:
Name Day1 Day2 Day3 Day4 Day5
-------------------------------------------------
John 32 40 - - 105
Nick 27 - - 82 -
Bob - 55 80 - -
The challenge I face is how to handle empty cells in the table when certain days have no salary entries (e.g. days 3 and 4 for John). One approach is to add zero-salary objects for every day in the salaryBreakdown array of each employee, but this could be inefficient and redundant. Is there a way to achieve the desired view without modifying the JSON data? The current HTML setup I've used falls short of meeting my needs.
Current HTML (incorrect):
<table>
<thead>
<tr>
<th>Name</th>
<th>Day1</th>
<th>Day2</th>
<th>Day3</th>
<th>Day4</th>
<th>Day5</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in jsonData">
<td ng-bind="employee.name"></td>
<td ng-repeat="item in employee.salaryBreakdown | orderBy: 'day'" ng-bind="item.salary"></td>
</tr>
</tbody>
</table>
Current Table (incorrect):
Name Day1 Day2 Day3 Day4 Day5
-------------------------------------------------
John 32 40 105
Nick 27 82
Bob 55 80