0

オブジェクトの配列を取得する $http 呼び出しがあります。このエンドポイントに対して 3 つの呼び出しを行い、最終的に次のような 3 つの配列が作成されます。

[
  {type: Dog, count: 3}
  {type: Cat, count: 4}
  {type: Elephant, count: 1}
]
[
  {type: Dog, count: 1}
  {type: Cat, count: 9}
]
[
  {type: Dog, count: 19}
  {type: Cat, count: 4}
  {type: Elephant, count: 12}
  {type: Frog, count: 2}

]

最初の呼び出しは 8 月の統計、2 回目は 9 月、3 回目は 10 月です。

私が望むのは、次のようなデータセットを作成することです...

[
  {type:Dog, data:[3,1,9]}
  {type:Cat, data:[4,9,4]}
  {type:Elephant, data:[1. null, 12]}
  {type:Frog, data:[null, null, 2}
]

... ngRepeat を使用して各要素をループして、月/動物の統計の表を表示できるようにします。

誰にもアイデアはありますか？

ありがとう。

4

2 に答える 2

1

3回の呼び出しを行う必要があり、サーバーからのデータ構造は角度で使用しているものとは異なるため、 を使用して、$q.all結果をマージする前にすべてのリクエストが行われたことを確認しました。課題の 1 つは、すべての動物が毎月返還されるわけではないことです。0動物が月に存在しないかどうかを表示するには、追加のコーディングが必要でした。

var app = angular.module('plunker', []);

app.factory('DataService', function($http, $q) {
  /* temp object */
  var tmp = {}, resultsArray = [];


  var DataService = {
    animals: [],
    loadData: function() {

      var def = $q.defer();
      var deferreds = [];
      var requestUrl = ['data1.json', 'data2.json', 'data3.json'];
      for (i = 0; i < requestUrl.length; i++) {    
        var url = requestUrl[i];
        var request = $http.get(url).success(function(res) {
          resultsArray.push(res);

        });
        deferreds.push(request);
      }

      $q.all(deferreds).then(function() {
        def.resolve( mergeResults());
      })

      return def.promise
    }

  }


  function createCountArray() {
    var len = resultsArray.length,
      arr = [];
    while (len) {
      arr.push(0);
      len--
    }
    return arr
  }

  function mergeResults() {
    angular.forEach(resultsArray, function(arr, i) {
      /* create key for all animals, need this because not all animals in each result set */
      angular.forEach(arr, function(item) {
        if (!tmp[item.type]) {
          tmp[item.type] = {type: item.type,count: createCountArray() }
        }
      });
    });

    angular.forEach(resultsArray, function(arr, i) {
      /* now populate counts*/
      angular.forEach(arr, function(item) {
        tmp[item.type].count[i] = item.count;
      });
    });

    /* now map object to array*/

    angular.forEach(tmp, function(val) {
      DataService.animals.push(val);
    });

    return DataService.animals;
  }
  return DataService;

})

app.controller('MainCtrl', function($scope, DataService) {

  DataService.loadData().then(function(res) {
    $scope.animalData = res;
  });    

});

DEMO

于 2013-11-13T02:15:23.677 に答える