javascript - 如何合并 Angular js的两个对象数组？

Question

我正在尝试使用 Angular 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);
    }; 
});

我从两个 Controller 获得两个对象数组作为list1和list2。现在我想将list1和list2合并为一个数组。请帮助我解决这个问题。

Answer 1

在第一个 $http 的成功处理程序中调用第二个 $http 请求。

由于 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);
          });
      });
  };
});

编辑:按照伟大的建议T.J. Crowder ，无需延迟调用第二个 $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);
    })
  };
});