how to merge two object array for angular js?

Question

I am trying to merge two or more object arrays with 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);
    }; 
});

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.

what does the console.log show ? I guess it's giving undefined, so you should probably nest your second http request in the success of the first one and concat in the success of the second — AshBringer
– AshBringer, Commented May 23, 2016 at 7:59

Community · Accepted Answer · 2017-05-23 12:08:01Z

Invoke second $http request in the success handler of the first $http.

As ajax is asynchronous in nature, by the time you are applying .concat, both the variables are 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);
          });
      });
  };
});

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.

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

That certainly works, but there's no particular reason to delay the second request if it doesn't need to use information from the first as part of the request; they could easily be in parallel.
@T.J.Crowder, I was about to edit with $q.all but as usual, you got first :)
"by great T.J. Crowder" LOL Now I'm going to get a fat head. :-)

T.J. Crowder · Accepted Answer · 2016-05-23 08:03:33Z

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:

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

Hello Mr T.J. Crowder,It is ok to merge two arrays.But I want to merge two or more arrays.How can I try to merge more than 2 arrays?
@MrMyo: If you're asking specifically about the merging part, what I'd probably do is have a result array (result = []) and then a series of push calls: result.push.apply(result, arr1); result.push.apply(result, arr2); result.push.apply(result, arr3); (probably in a loop). (In ES2015 that would be much prettier: result.push(...arr1); result.push(...arr2);) If you're asking about a series of $http requests, build up an array of their return values (their promises) and then give that array to $q.all (or Promise.all). It will wait for all of them.

Collectives™ on Stack Overflow

how to merge two object array for angular js?

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related