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

我现在面临的问题是，如上所示，表格中的单元格将为空（例如John的第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数据。我现在的HTML代码如下所示，虽然我了解它的工作原理以及为什么它不能完全满足我的要求。

是否有其他方法使用AngularJS来实现所需的表视图？

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

可以将薪水数组压缩为单个对象，并将天数作为键，并迭代一组数字并使用每天查看该人的工资

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

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

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

这是演示它的小提琴：higher precedence

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

2 个答案: