How do you combine data from two http posts into one data object

Question

I wish to combine data from two different http posts into one object variable. I wish to run the combined results through ng-repeat to display a combined list on screen. Is there a way to do this in standard java script or do I have to bring in a library? I tried object.assign but received a null or undefined object error.

$http.post('Url1', {
  param: @scope.myParam
}).success(function (data) {
  $scope.myData1 = data;
});

$http.post('Url2', {
  param: @scope.myParam
}).success(function (data) {
  $scope.myData2 = data;
});

$scope.myData = Object.assign($scope.myData1, $scope.myData2);

Again use Promise.all to wait both call to be finished and then merge the data — vipul patel, Oct 17 '19 at 04:35
Possible duplicate of [Merge two json together into one json in ngOnInit function](https://stackoverflow.com/questions/58038134/merge-two-json-together-into-one-json-in-ngoninit-function) — Jay, Oct 17 '19 at 04:36
The `.success` method has been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). — georgeawg, Oct 17 '19 at 10:41

jitender · Answer 1 · 2019-10-17T04:41:50.983

2

I assume your data is of object type so you can do it using spread syntax like

var obj1={a:1};
var obj2={b:2};

var obj3={...obj1,...obj2}

console.log(obj3)

in your case $scope.myData = {...$scope.myData1,... $scope.myData2};

if your data is array than use Array.concat

$scope.myData = $scope.myData1.concat($scope.myData2)

Also don't forgot await for promise as specified in other ans

Promise.all([promise1, promise2]).then( (res) => {//perform your merge here}

edited Oct 17 '19 at 04:41

answered Oct 17 '19 at 04:36

jitender

10,238
1
18
44

The Promise.all with spread operator definitely works where I could not get Object.assign to give me combined results. However, there is another complication I have with the Promise.all that I previously did not think about. I will not always call both http posts. Based on conditions, sometimes I will call one or the other or both. Can I just setup mutiple Promis.all's? For example: Promise.all([promise1, promise2]) ...., Promise.all([promise1])...., Promise.all([promise2])..... – Bill Oct 17 '19 at 05:51
@Bill yes you can – jitender Oct 17 '19 at 06:49

vipul patel · Answer 2 · 2019-10-17T05:45:11.490

2

Use Promise.all for both call to be finished:

var promise1 = $http.post('Url1', {
      param: @scope.myParam
    }).success(function (data) {
      $scope.myData1 = data;
    });

     var promise2 = $http.post('Url2', {
      param: @scope.myParam
    }).success(function (data) {
      $scope.myData2 = data;
    });

    Promise.all([promise1, promise2]).then( (res) => {
        $scope.myData = Object.assign({}, $scope.myData1 , $scope.myData2 );
    });

edited Oct 17 '19 at 05:45

answered Oct 17 '19 at 04:38

vipul patel

668
4
7

NO errors this time but I'm not able to get that to work. $scope.myData1 has data. $scope.myData2 has data. $scope.myData has nothing. Typescript is also involved. I'm guessing I have to declare promise1 & promise2 in typescript. If so, what type of ojbects would they be? – Bill Oct 17 '19 at 05:07
@Bill i think you are not returning the data in both promise. So use this one : `$scope.myData = Object.assign({}, $scope.myData1, $scope.myData2);` i edited the answer – vipul patel Oct 17 '19 at 05:43

score 1 · Answer 3 · answered Oct 17 '19 at 04:38

URL calls are asynchronous, meaning they will run separately from the function. Having the Object assign after both calls means it will occur after the URLS calls are made, but NOT NECESSARILY after the calls finish, so both data values will be undefined. As suggested, it will be necessary to wait for both calls to finish before there will be data to combine together and use in other functions

georgeawg · Accepted Answer · 2019-10-17T10:45:41.897

Use $q.all:

var promise1 = $http.post('Url1', {
  param: @scope.myParam
}).then(function(response) {
  return response.data;
});

var promise1 = $http.post('Url2', {
  param: @scope.myParam
}).then(function (response) {
  return response.data;
});

$q.all([promise1, promise2]).then([data1, data2] => {
  $scope.myData = {...data1, ...data2};  //combine object
  //OR
  $scope.myData = [...data1, ...data2];  //combine array
});

Beware that the ES6 promises returned by Promise.all are not integrated with the AngularJS framework. AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

The promises returned by $q.all are integrated with the AngularJS framework.

For more information, see

How do you combine data from two http posts into one data object

4 Answers4