javascript - 将 ID 替换为名称

Question

我有什么

我有一些 json 格式的数据，如下所示:

var data = [{id: 1, name="AB", designation=1},
            {id: 2, name="CD", boss= 1, designation=2},
            {id: 3, name="EF", boss= 1, designation=2},
            {id: 4, name="GH", boss= 1, designation=2},
            {id: 5, name="IJ", boss= 2, designation=3},
            {id: 6, name="KL", boss= 3, designation=3},
            {id: 7, name="MN", boss= 3, designation=3},
            {id: 8, name="OP", boss= 7, designation=4},
            {id: 9, name="QR", boss= 3, designation=3},
            {id: 10, name="ST", boss= 1, designation=2}];

var designations = [{id: 1, name: "Principle"},
                    {id: 2, name: "HOD"},
                    {id: 3, name: "Teacher"},
                    {id: 4, name: "Student"}];

在上面的数据中，请注意 boss 字段引用同一个数组，而 designation 引用不同的数组。

我想要什么

我想在表格中显示这些数据:

id | name | boss | designation
---+------+------+------------
 1 | AB   | SUP  | Principle
 2 | CD   | AB   | HOD
 3 | EF   | AB   | HOD
 4 | GH   | AB   | HOD
 5 | IJ   | CD   | Teacher
 6 | KL   | EF   | Teacher
 7 | MN   | EF   | Teacher
 8 | OP   | MN   | Student
 9 | QR   | EF   | Teacher
10 | ST   | AB   | HOD

我有什么计划

现在我正在使用 javascript 显示上述表格。现在我计划使用 Angular.js 学习并实现相同的示例。 AngularJS 有内置的东西可以做这样的事情吗？如果没有，请告诉我如何使用 javascript 做到这一点？

Answer 1

您可以使用data.map(...)以您需要在表格中显示的格式进行投影。

例如，您可以执行以下操作:

$scope.tableContent = data.map(function(d) { return new {
   id: d.id, 
   name: d.name, 
   boss: data.filter(function(x) {return x.id == d.boss; })[0],
   designation: designations.filter(function(des) { des.id == d.designation; })[0];
});

或者类似的东西。然后，您只需将 tableContent 绑定(bind)到 ng-repeat 并按照您想要的 Angular 渲染 HTML。

类似这样的事情:

<table>
   <tr ng-repeat='row on tableContent'>
       <td>{{row.id}}</td>
       <td>{{row.name}}</td>
       <td>{{row.boss.name}}</td>
       <td>{{row.designation.name}}</td>
   </tr>
</table>