如何用可能包含空单元格的JSON数据填充表（AngularJS）

Question

I have the following JSON data that contains the names and salaries of employees across a number of days (from 1 to 5). What I would like to do is place this data within a HTML table using AngularJS so it looks like the required table shown 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 issue I'm facing now is that there are cells within the table that will be empty as shown above (eg days 3 and 4 for John). Now I could solve this by including an object for each day within the salaryBreakdown array for every employee, eg for John:

salaryBreakdown: [{day: 1, salary: 32}, {day: 2, salary: 40}, {day: 3, salary: 0}, {day: 4, salary: 0}, {day: 5, salary: 105}]

Unfortunately, this would require additional coding to create a lot of unnecessary data that would either be stored in a database or generated for each request simply for visualization purposes. I am trying to find a way so that I can create the required view without altering the JSON data. The HTML code I have at the moment is shown below, although I understand how it works and why it doesn't exactly meet my requirements.

Is there another way using AngularJS to achieve the required table view?

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

Answer 1

Could flatten the salary arrays into single objects with days as keys and iterate over an array of day numbers and use each day to look upthat person's salary

 angular .module('app', []) .controller('myCtrl', function($scope) { $scope.data = angular.copy(data); $scope.data.forEach(o => o.salaryBreakdown = o.salaryBreakdown.reduce((a, c) => { a[c.day] = c; return a }, {})) $scope.days = [1,2,3,4,5] }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> <table ng-app="app" ng-controller="myCtrl"> <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 data"> <td ng-bind="employee.name"></td> <td ng-repeat="day in days" ng-bind="employee.salaryBreakdown[day].salary ||0 "></td> </tr> </tbody> </table> <script> var 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 } ] } ] </script> 

Answer 2

You could create a new array with blank objects inserted like this:

data.forEach(person => {
  person.salaryBreakdownTransformed = [];
  for (let i = 1; i < 6; i++) {
    let bd = person.salaryBreakdown.find(b => {
      return b.day === i;
    }) || {"day": i, "salary": 0};
    person.salaryBreakdownTransformed.push(
      bd
    );
  }
});

Here's a fiddle to demonstrate it: https://jsfiddle.net/L1184yqu/16/