Arrays Javascript将三个数组转换为一个数组,以便与AngularJS指令一起使用
我有一个$http调用,用它检索一个对象数组。我对该端点进行了三次调用,最终得到三个数组,如下所示:Arrays Javascript将三个数组转换为一个数组,以便与AngularJS指令一起使用,arrays,angularjs,loops,object,angularjs-ng-repeat,Arrays,Angularjs,Loops,Object,Angularjs Ng Repeat,我有一个$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: Elepha
[
{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}
]
第一个电话是八月统计,第二个九月,第三个十月
我想要的是创建一个数据集,看起来像这样
[
{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循环遍历每个元素,以显示一个月/动物统计表
有人有什么想法吗
谢谢。你要找的是一种分组操作——你可以用这个关键词做你自己的研究。我的建议是:
- 使用Javascript的原生
将3个数组合并为一个数组concat()
- 在合并的数组上使用
函数。\uuu.groupBy()
这将为您进行分组 - 迭代结果对象,根据需要映射结果;Underline.js
即将推出\uuz.map()
代码片段是可以实现的快速演示。它可以在已经合并的阵列上工作。因为您必须进行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;
});
});
var-app=angular.module('plunker',[]);
app.factory('DataService',函数($http,$q){
/*临时对象*/
var tmp={},resultsArray=[];
var数据服务={
动物:[],
loadData:function(){
var def=$q.defer();
风险值递延=[];
var requestUrl=['data1.json','data2.json','data3.json'];
对于(i=0;i
迈克尔欢呼,“群比”笛福看起来应该这样做。感谢您的帮助。感谢Charlie,他已经在$http调用中使用了$q,但是mergeResults()函数工作得很好。在animals数组中添加了一个按count数组中的值排序的函数,所以一切都很好。干杯