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

时间:2016-05-23 07:56:49

标签: javascript angularjs

我正在尝试将两个或多个对象数组与角度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);
    }; 
});

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

2 个答案:

答案 0 :(得分:3)

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

由于ajax本质上是异步的,因此当您应用.concat时,这两个变量都是undefined



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




编辑:正如伟大emrfs所建议的那样,无需延迟第二个$http请求的调用,因此可以使用T.J. Crowder或{{ 1}}正如他的回答中所解释的那样。



Promise




答案 1 :(得分:2)

等待两个HTTP请求完成,然后合并列表。 $http会返回一个承诺,因此您可以使用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);
        });
    }; 
});