Javascript 将三个数组转换为一个以与 AngularJS 指令一起使用答案

【问题标题】：Javascript convert three arrays to one for use with AngularJS directiveJavascript 将三个数组转换为一个以与 AngularJS 指令一起使用
【发布时间】：2013-11-25 08:36:43
【问题描述】：

我有一个 $http 调用，我用它检索对象数组。我对该端点进行了三次调用，最终得到三个数组，如下所示：

[
  {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 月的统计数据，9 月 2 日，10 月 3 日。

然后我想要创建一个看起来像这样的数据集......

[
  {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 遍历每个元素以显示月份/动物统计数据表。

有人有什么想法吗？

谢谢。

【问题讨论】：

标签： arrays angularjs loops object angularjs-ng-repeat

【解决方案1】：

因为您必须进行 3 次调用，并且来自服务器的数据结构与您在 Angular 中使用的不同，所以使用 $q.all 来确保在合并结果之前发出的所有请求。一个挑战是，并非所有动物每个月都能归还。如果动物在一个月内不存在，这需要一些额外的编码才能显示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

【讨论】：

感谢 Charlie，$q 已经用于 $http 调用，但 mergeResults() 函数运行良好。还添加了一个函数来按动物数组中的计数数组中的值进行排序，所以一切都很好。干杯。

【解决方案2】：

您正在寻找某种 groupBy 操作 - 您可以使用此关键字进行自己的研究。我的建议是：

使用Javascript原生的concat()将3个数组合并为一个
在合并数组上使用来自Underscore.js 的_.groupBy() 函数。
这将为您进行分组。
根据您的需要遍历结果对象以映射结果； Underscore.js _.map() 到手了

This code sn-p 是一个快速演示，可以实现什么。它适用于已经合并的数组。

【讨论】：

干杯迈克尔，_.groupBy() defo 看起来应该这样做。谢谢你的小提琴。