How to Sum From Multi object

Question

Please help me, I'm using 2 JSON feed, need to display array value in one table then add sum row for each column, but I don't know how to call Expense Table and sum it.

Income JSON Table:

• nominal_income

Expense JSON Table:

• nominal_expense

If you have any example please let me know :D

My HTML:

<table ng-controller="incomeCtrl">
   <tr>
     <td>Income</td>
     <td>Expense</td>

   </tr>  
    <tr ng-repeat="item in incomes" ng-init="$last ? runEvent(item) : null">
      <td class="text-left">{{item.nominal_income}}</td>
      <td class="text-left">{{item.nominal_expense}}</td>      // how to call this?
    </tr>
   <tr>
       <td class="text-left" >{{ income_total | number:2 }}</td>
       <td class="text-left" >{{ expense_total | number:2 }}</td>    //how to sum this ?     
   </tr>
</table>

JS Controller:

$scope.runEvent = function(item) { 
       var income_total = 0;

        angular.forEach(item, function(item) {
          income_total = income_total -(- incomes.nominal_income)          
          ;})        
        $scope.income_total = income_total;}

Answer 1

Use a custom function and call the function with key parameter

angular.module("test",[]).controller("testc",function($scope) {
 $scope.incomes=[{nominal_income:20,nominal_expense:75.5},{nominal_income:30.00,nominal_expense:14.50},{nominal_income:49.99,nominal_expense:10}]
 $scope.average = function(array, key) {
  var value= 0,
  average;

  for (var i = 0; i < array.length; i++) {
     value+= array[i][key];
  }
  return value;
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<table >
<tr>
 <td>Income</td>
 <td>Expense</td>
</tr>  
<tr ng-repeat="item in incomes" ng-init="$last ? runEvent(item) : null">
  <td class="text-left">{{item.nominal_income}}</td>
  <td class="text-left">{{item.nominal_expense}}</td>      
</tr>
<tr>
  <td style="color:green" class="text-left" >{{average(incomes,"nominal_income") | number:2 }}
  </td>
  <td style="color:green" class="text-left" >{{average(incomes,"nominal_expense") | number:2 }}
  </td> 
</tr>
</table>
</div>

Update: How to join IncomeCtrl and ExpenseCtrl

You can call another controller inside a controller as nested controller. Or you can pass the data from one controller to another controller by using $routScope or $Cookies or $service or $BroadCase etc

<table ng-controller="incomeCtrl">
   <tr>
     <td>Income</td>
     <td>Expense</td>

   </tr>  
    <tr ng-repeat="item in incomes" ng-init="$last ? runEvent(item) : null">
      <td class="text-left">{{item.nominal_income}}</td>
      <td ng-controller="ExpenseCtrl" class="text-left">{{expenses[$index].nominal_expense}}</td>      // may you need $$parent.$index
    </tr>
   <tr>
       <td style="color:green" class="text-left" >{{average(incomes,"nominal_income") | number:2 }}
      </td>
      <td ng-controller="ExpenseCtrl" style="color:green" class="text-left" >{{average(expenses,"nominal_expense") | number:2 }}
      </td> 
   </tr>
</table>

Answer 2

You can pass a type / column as a parameter to be reduced to get the sum. Here is an example:

var app = angular.module('myApp', []);
app.controller('incomeCtrl', function($scope, incomeService) { // incomeService injected here as a serivce
  var inc = incomeService.get_income();
  var exp = incomeService.get_expense();
  $scope.incomes = [];
  /* works if `inc` and `exp` have the same length, merge with caution! */
  for (var i = 0; i < inc.length; i++) {
    $scope.incomes.push({
      "nominal_income": inc[i],
      "nominal_expense": exp[i]
    })
  }

  $scope.sum = function(type) {
    return $scope.incomes.reduce((x, y) => {
      return x + y[type];
    }, 0);
  }
});

app.factory('incomeService', function() {
  var service = {};
  var data = {
    "income": [2.01, 3.23, 6.56],
    "expense": [1.12, 2.34, 5.67]
  }
  service.get_income = function() {
    return data.income;
  }
  service.get_expense = function() {
    return data.expense;
  }
  service.set_income = function(array) { // populated in incomeCtrl
    data.income = array;
  }
  service.set_expense = function(array) { // populated in expenseCtrl
    data.expense = array;
  }
  return service;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="incomeCtrl">

  <table>
    <tr>
      <td>Income</td>
      <td>Expense</td>
    </tr>
    <tr ng-repeat="item in incomes">
      <td class="text-left">{{item.nominal_income}}</td>
      <td class="text-left">{{item.nominal_expense}}</td>
    </tr>
    <tr style="color:red;">
      <td class="text-left">{{sum('nominal_income') | number:2}}</td>
      <td class="text-left">{{sum('nominal_expense') | number:2}}</td>
    </tr>
  </table>

</div>