I am trying to merge two or more object arrays with angular js.
我试图合并两个或多个具有角度js的对象数组。
var app = angular.module('bookingApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('bookingCtrl', function ($scope, $http, $timeout) {
$scope.init = function(){
$http({
method: 'get',
url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php',
data: $.param({'search' : ''}),
headers: { 'Content-Type': 'application/json; charset=utf-8'}
})
.success(function(data){
var list1 = data;
angular.isObject(list1);
//console.log(list1);
});
$http({
method: 'get',
url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php',
data: $.param({'search' : ''}),
headers: { 'Content-Type': 'application/json; charset=utf-8'}
})
.success(function(data){
var list2 = data;
//console.log(list2);
});
$scope.myConcatenatedData = list1.concat(list2);
console.log(myConcatenatedData);
};
});
I get two object arrays as list1 and list2 from two controllers.Now I want to merge list1 and list2 as an array. Please help me for this solution.
我从两个控制器获得两个对象数组作为list1和list2。现在我想将list1和list2合并为一个数组。请帮我解决这个问题。
2 个解决方案
#1
2
Wait for both HTTP requests to complete, then combine the lists. $http
returns a promise, so you can use Promise.all
(perhaps $q.all
as this is Angular) to wait for them both to be done. See comments:
等待两个HTTP请求完成,然后组合列表。 $ http返回一个promise,所以你可以使用Promise.all(也许是$ q.all,因为这是Angular)来等待它们都完成。看评论:
app.controller('bookingCtrl', function ($scope, $http, $timeout) {
$scope.init = function(){
var list1, list2; // Declare them here
Promise.all([ // Wait for both requests to complete (perhaps this should be $q.all)
$http({
method: 'get',
url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php',
data: $.param({'search' : ''}),
headers: { 'Content-Type': 'application/json; charset=utf-8'}
})
.success(function(data){
list1 = data;
}),
$http({
method: 'get',
url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php',
data: $.param({'search' : ''}),
headers: { 'Content-Type': 'application/json; charset=utf-8'}
})
.success(function(data){
list2 = data;
})
]).then(function() { // Then concat the lists
$scope.myConcatenatedData = list1.concat(list2);
});
};
});
#2
3
Invoke second $http
request in the success handler of the first $http
.
在第一个$ http的成功处理程序中调用第二个$ http请求。
As ajax
is asynchronous in nature, by the time you are applying .concat
, both the variables are undefined
由于ajax本质上是异步的,因此在应用.concat时,两个变量都是未定义的
var app = angular.module('bookingApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('bookingCtrl', function($scope, $http, $timeout) {
$scope.init = function() {
$http({
method: 'get',
url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
.success(function(data1) {
$http({
method: 'get',
url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
.success(function(data2) {
$scope.myConcatenatedData = data1.concat(data2);
console.log(myConcatenatedData);
});
});
};
});
Edit: As suggested by great T.J. Crowder, there is no need to delay the invokation of second $http
request hence $q.all
could be used or Promise
as explained in his answer.
编辑:正如伟大的T.J.克劳德,没有必要延迟第二个$ http请求的调用,因此可以使用$ q.all或者答案中解释的Promise。
var app = angular.module('bookingApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('bookingCtrl', function($scope, $http, $timeout) {
$scope.init = function() {
$q.all([$http({
method: 'get',
url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}),
$http({
method: 'get',
url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
]).then(function(response) {
$scope.myConcatenatedData = response[0].concat(response[1]);
console.log(myConcatenatedData);
})
};
});
#1
2
Wait for both HTTP requests to complete, then combine the lists. $http
returns a promise, so you can use Promise.all
(perhaps $q.all
as this is Angular) to wait for them both to be done. See comments:
等待两个HTTP请求完成,然后组合列表。 $ http返回一个promise,所以你可以使用Promise.all(也许是$ q.all,因为这是Angular)来等待它们都完成。看评论:
app.controller('bookingCtrl', function ($scope, $http, $timeout) {
$scope.init = function(){
var list1, list2; // Declare them here
Promise.all([ // Wait for both requests to complete (perhaps this should be $q.all)
$http({
method: 'get',
url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php',
data: $.param({'search' : ''}),
headers: { 'Content-Type': 'application/json; charset=utf-8'}
})
.success(function(data){
list1 = data;
}),
$http({
method: 'get',
url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php',
data: $.param({'search' : ''}),
headers: { 'Content-Type': 'application/json; charset=utf-8'}
})
.success(function(data){
list2 = data;
})
]).then(function() { // Then concat the lists
$scope.myConcatenatedData = list1.concat(list2);
});
};
});
#2
3
Invoke second $http
request in the success handler of the first $http
.
在第一个$ http的成功处理程序中调用第二个$ http请求。
As ajax
is asynchronous in nature, by the time you are applying .concat
, both the variables are undefined
由于ajax本质上是异步的,因此在应用.concat时,两个变量都是未定义的
var app = angular.module('bookingApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('bookingCtrl', function($scope, $http, $timeout) {
$scope.init = function() {
$http({
method: 'get',
url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
.success(function(data1) {
$http({
method: 'get',
url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
.success(function(data2) {
$scope.myConcatenatedData = data1.concat(data2);
console.log(myConcatenatedData);
});
});
};
});
Edit: As suggested by great T.J. Crowder, there is no need to delay the invokation of second $http
request hence $q.all
could be used or Promise
as explained in his answer.
编辑:正如伟大的T.J.克劳德,没有必要延迟第二个$ http请求的调用,因此可以使用$ q.all或者答案中解释的Promise。
var app = angular.module('bookingApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('bookingCtrl', function($scope, $http, $timeout) {
$scope.init = function() {
$q.all([$http({
method: 'get',
url: 'http://mmres.baganthandehotel.net/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}),
$http({
method: 'get',
url: 'http://mmres.classique-inn.com/mmresadmin/invoicejson.php',
data: $.param({
'search': ''
}),
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
]).then(function(response) {
$scope.myConcatenatedData = response[0].concat(response[1]);
console.log(myConcatenatedData);
})
};
});