以角度显示来自 JSON 数组的 ng-repeat 数据

Question

您好，我有以下从服务返回的数据，我无法控制它的返回方式：

{"day_1":[{"classroom":"Nursery","count":0},{"classroom":"Junior Kindy","count":1}],"day_2":[{"classroom":"Nursery","count":4},{"classroom":"Junior Kindy","count":0}]}

但我需要以如下所示的枢轴格式显示它：

classroom    | day_1  | day_2
============  ======== ======
Nursery      | 0      | 4
Junior Kindy | 1      | 0

这是控制器中的代码

$scope.rolls=[];

Rolls.getRollMarked().then(
    function(data){
        console.log(data.data);
        $scope.rolls = data.data;
    }
)

在我正在使用的视图中，但它不显示当天的任何计数，我不知道如何显示它..所以请告诉我如何以上述格式显示它？

   <table class="table table-bordered">
      <tr>
         <td>Classroom</td>
         <td>day_1</td>
         <td>day_2</td>
       </tr>
       <tr ng-repeat="roll in rolls">
          <td> 
            {{roll[$index]['classroom']}}
          </td>
          <td>
              {{roll.day_1}}
               </td>
               <td>
                   {{roll.day_2}}
               </td>
            </tr>
     </table>

Answer 1

您需要转换数据。 ng-repeat 正如你所设置的那样需要一个数组。

使用一些简单的代码，你可以把它放到一个数组中，然后你的代码就可以正常工作了。

另外，您应该更新您的 html。您不需要使用 $index 来引用项目，因为在这种情况下每个项目都绑定到迭代器变量

<table class="table table-bordered">
  <tr>
     <th>Classroom</th>
     <th>day_1</th>
     <th>day_2</th>
   </tr>
   <tr ng-repeat="roll in rolls">
      <td> 
        {{roll.classroom}}
      </td>
      <td>
        {{roll.day_1}}
      </td>
      <td>
        {{roll.day_2}}
      </td>
   </tr>
</table>

然后调用一个转换函数，将数据变成一个数组。我在这里使用了lodash.find，所以你要么需要引用它，要么使用你自己的 find 方法。

Rolls.getRollMarked().then(
    function(data){
        console.log(data.data);
        $scope.rolls = convert(data.data);
    }
)

function convert(json) {
    var rolls = [];
    var days = ['day_1', 'day_2'];
    for (var d = 0; d < days.length; ++d) {
      var day = days[d];
      for (var i = 0; i < json[day].length; ++i) {
        var classroom = json[day][i];
        var existing = _.find(rolls, { "classroom": classroom.classroom });
        if (!existing) {
          existing = { classroom: classroom.classroom };
          rolls.push(existing);
        }
        existing[day] = classroom.count;
      }
    }
    return rolls;
}