Combining data from multiple $http calls

Question

I have 3 api endpoints

/getAccount which returns

[{"id":"1", "name":"Bank 1", "starting_balance":"0.00"},{"id":"2", "name":"Bank 2", "starting_balance":"10.83"}] into $scope.acc

/getExpense which returns

[{"id":"1", "amount":"400.00"},{"id":"2", "amount":"500.00"}] into $scope.expense

/getIncome which returns

[{"id":"1", "amount":"1000.00"},{"id":"2", "amount":"1000.00"}] into $scope.income

I don't know how to combine these three data. Here is my HTML code:

<tr>
   <td>Account Name</td>
   <td>Starting Balance</td>
   <td>Income</td>
   <td>Expense</td>
</tr>
<tr ng-repeat="a in acc">
   <td>{{a.name}}</td>
   <td>{{a.starting_balance}}</td>
   <td></td>
   <td></td>
</tr>

I like both ryanyuyu's and Sachila Ranawaka's answers! Can I select both? — Iyas
– Iyas, Commented Dec 28, 2017 at 23:05
If you find both answers useful, you can upvote both. But you can only accept one answer. — ryanyuyu
– ryanyuyu, Commented Dec 28, 2017 at 23:08

ryanyuyu · Accepted Answer · 2017-12-28 15:52:00Z

It sounds like you are trying to make 3 AJAX calls and then combine all the results together. It might be better just to aggregate this information in the API that you call instead of trying to fix this client-side.

But if you're stuck with the API and have to do this client-side, I suggest using $q.all to combine the 3 separate promises (from the API calls) into a single post-processing function.

For example, in your controller code:

$q.all([api.getAccount(), api.getExpense(), api.getIncome()])
    .then(combineInformation);

function combineInformation(apiResults) {
    var accountInfo = apiResults[0]; //result of getAccount()
    var expenseInfo = apiResults[1]; //result of getExpense()
    var incomeInfo = apiResults[2];  //result of getIncome()

    var aggregateInfo = accountInfo.map(buildInfo);

    function buildInfo(account) {
        var info = {
            id: account.id,
            account: account
        };

        info.expense = expenseInfo.find(function (e) { return e.id === info.id; });
        info.income = incomeInfo.find(function (i) { return i.id === info.id; });
        return info;
    }
    $scope.arr = aggregateInfo;
}

Demo on plunker

Sachila Ranawaka · Accepted Answer · 2017-12-28 14:36:18Z

1

combine the arrays using map operator.

Demo

angular.module('app',[])
.controller('ctrl',function($scope){
$scope.income = [{"id":"1", "amount":"1000.00"},{"id":"2", "amount":"1000.00"}]

$scope.expense = [{"id":"1", "amount":"400.00"},{"id":"2", "amount":"500.00"}]

$scope.acc = [{"id":"1", "name":"Bank 1", "starting_balance":"0.00"},{"id":"2", "name":"Bank 2", "starting_balance":"10.83"}] 

$scope.arr = $scope.acc.map((item) => {
    var exp = $scope.expense.find((ex) => ex.id === item.id)
    var inc = $scope.income.find((ins) => ins.id === item.id)
    return {
      acc : item,
      inc : inc,
      exp : exp
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr>
   <td>Account Name</td>
   <td>Starting Balance</td>
   <td>Income</td>
   <td>Expense</td>
</tr>
<tr ng-repeat="a in arr">
   <td>{{a.acc.name}}</td>
   <td>{{a.acc.starting_balance}}</td>
   <td>{{a.inc.amount}}</td>
   <td>{{a.exp.amount}}</td>
</tr>

</table>
</div>

answered Dec 28, 2017 at 14:36

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

Iyas Over a year ago

I like your answer. But since ryanyuyu's answer accurately address the promise issue, I choose his/her answer. Thanks for your help. Really appreciate it.

Collectives™ on Stack Overflow

Combining data from multiple $http calls

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related