javascript - 如何使用可能包含空单元格的 JSON 数据填充表格 (AngularJS)

Question

我有以下 JSON 数据，其中包含多天(从 1 到 5)内员工的姓名和工资。我想要做的是使用 AngularJS 将此数据放入 HTML 表中，使其看起来像下面所示的所需表。

JSON 数据:

[{
        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
            }
        ]
    }
]

所需表格:

Name     Day1     Day2     Day3     Day4     Day5
-------------------------------------------------
John       32       40        -        -      105
Nick       27        -        -       82        -
Bob         -       55       80        -        -

我现在面临的问题是，表格中的某些单元格将为空，如上所示(例如约翰的第 3 天和第 4 天)。现在，我可以通过在每个员工的 salaryBreakdown 数组中包含每天的对象来解决这个问题，例如对于约翰:

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

不幸的是，这需要额外的编码来创建大量不必要的数据，这些数据要么存储在数据库中，要么仅为了可视化目的而为每个请求生成。我正在尝试找到一种方法，以便我可以在不更改 JSON 数据的情况下创建所需的 View 。我目前拥有的 HTML 代码如下所示，尽管我了解它是如何工作的以及为什么它不完全满足我的要求。

是否有另一种方法使用AngularJS来实现所需的表格 View ？

当前 HTML(不正确):

<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>

当前表格(不正确):

Name     Day1     Day2     Day3     Day4     Day5
-------------------------------------------------
John       32       40      105
Nick       27       82
Bob        55       80

Answer 1

您可以创建一个新数组，其中插入空白对象，如下所示:

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
    );
  }
});

这里有一个 fiddle 来演示它:https://jsfiddle.net/L1184yqu/16/