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

Hi I have following data that is returned from service which I do not have any control on how it is returned:

嗨我有从服务返回的以下数据,我对它的返回方式没有任何控制权:

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

but I need to display it in pivot format that is like below:

但我需要以下面的透视格式显示它:

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

This is the code in controller

这是控制器中的代码

$scope.rolls=[];

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

in the view I am using following but it doesn't display any count for the day and I am not sure how to display it..so please let me know how can I display it in the above format?

在我使用的视图中,但它没有显示当天的任何计数,我不知道如何显示它...所以请让我知道如何以上述格式显示它?

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

1 个解决方案

#1

You need to convert your data. ng-repeat as you have set it up expects an array.

您需要转换数据。你设置的ng-repeat需要一个数组。

Using some easy code you can get it to an array though, and then your code will work alright.

使用一些简单的代码,你可以将它带到一个数组,然后你的代码将正常工作。

Also, you should update your html. You don't need to reference items using $index since each item is bound to the iterator variable in that case

此外,您应该更新您的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>

And then call a convert function that makes the data into an array. I've used lodash.find here, so you either need to reference that or use your own find method.

然后调用一个转换函数,使数据成为一个数组。我在这里使用过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;
}

#1