如何为角度js合并两个对象数组？

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

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

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