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

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

   <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，因此您需要引用它或使用您自己的查找方法。

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

使用角度为JSON数组的ng-repeat显示数据

1 个答案: