AngularJS - Grabbing multiple JSON key values and then adding them together

Since JS is a dynamic language you can add a new property/method to 'Financial Info' that does the mathematics. like:

  details['Financial Info'].calcTotalLand= function(){return this.land_prev+ this.land_curr;};

you can also just write in your HTML

{{ details['Financial Info'].land_curr + details['Financial Info'].land_prev}}

if possible

I would recommend calling a function from your html to get the total. That way, if the values in your 'Financial Info' object change dynamically, the total would be updated as well. See the example I have provided below. (I also threw in an ng-repeat to list all of the 'Financial Info', as well as the currency filter in case you didn't know about those).

In the example, I just hard coded your example object into the $scope.details variable. In your actual application, you can still populate this the same way you were - using the $http service to call your API.

You can add a function, called getTotal() for example, to the controller's $scope. That way, you can call it directly from your html using {{getTotal()}}.

In the getTotal() method, you can just utilize angular's built in forEach() method (or just plain old vanilla javascript if you prefer) to loop through every item in the 'Financial Info' object. Then, you just need to call parseInt() passing in the value, since they are strings in your object, then add it to a running sum variable. Finally, you can return the sum after angular's forEach() is complete.

EDIT: Added methods for getting the total of all _curr values and _prev values, as well as land_.

EDIT 2: Added a timeout to simulate the data loading via your $http call. To avoid getting the error with $scope.details being null until your $http call returns, you can either add if (!$scope.details) { return; } at the beginning of each of your getTotal functions, or you could initialize $scope.details with null or blank values for each of the items that you expect your $http call to return. For example, in the snippet below, I initialized the $scope.details variable as such:

$scope.details = {
  'Executive Summary': null,
  'Financial Info': {},
  ID: null
};

Working Example:

angular.module('ngApp', [])
  .controller('carDetails', carDetails);

function carDetails($scope, $timeout) {
  $scope.details = {
    'Executive Summary': null,
    'Financial Info': {},
    ID: null
  };

  $scope.loading = true;
  $timeout(function() {
    $scope.details = {
      'Executive Summary': "This is a test. Please ignore.",
      'Financial Info': {
        alt_curr: "1000",
        alt_prev: "500",
        auto_curr: "2100",
        bldgs_curr: "12000",
        bldgs_prev: "5000",
        land_curr: "30000",
        land_prev: "700",
        machine_curr: "25000",
        machine_prev: "1000",
        other_curr: "2659",
        other_exp_curr: "900",
        other_exp_expl: "9800",
        other_exp_prev: "600",
        other_prev: "6000",
        startup_curr: "600",
        startup_prev: "550"
      },
      ID: 12208
    };
    $scope.loading = false;
  }, 5000);

  $scope.getTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      sum += parseInt(value, 10);
    });
    return sum;
  }

  $scope.getCurrTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      if (key.substring(key.length - 5) == '_curr') {
        sum += parseInt(value, 10);
      }
    });
    return sum;
  }

  $scope.getPrevTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      if (key.substring(key.length - 5) == '_prev') {
        sum += parseInt(value, 10);
      }
    });
    return sum;
  }

  $scope.getLandTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      if (key.substring(0, 4) == 'land') {
        sum += parseInt(value, 10);
      }
    });
    return sum;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ngApp" ng-controller="carDetails" ng-cloak>
  <div ng-show="!loading">
    <div ng-repeat="(key, value) in details['Financial Info']">
      <span>{{key}}: {{value|currency}}</span>
    </div>
    <hr/>
    <span>TOTAL: {{getTotal()|currency}}</span>
    <br>
    <span>Current Total: {{getCurrTotal()|currency}}</span>
    <br>
    <span>Previous Total: {{getPrevTotal()|currency}}</span>
    <br>
    <span>Land Total: {{getLandTotal()|currency}}</span>
  </div>
  <div ng-show="loading">
    Simulating data loading by using a timeout...
  </div>
</div>

Did you try forEach in Angular ? See below:

angular.module('myApp', []).controller('carDetails', ['$scope', function(scope) {
             var vm = this;
             vm.obj = {'Financial Info':{
                alt_curr : "1000", alt_prev : "2000"
             }}
             vm.sum = 0;
             angular.forEach(vm.obj['Financial Info'], function(val, key){
                vm.sum +=parseInt(val);
             });
             console.log(vm.sum)
         }]);

Edit: In your html, you can display the variable as shown below:

<html>
<div ng-app="myApp" ng-controller="carDetails as vm">
{{vm.sum}}
</div>
</html

Unfortunately, if the keys in your list can be altered at any time, you could never write code to sum groups together that would work forever. As soon as an additional key was added, changed, or one completely removed, your code would fail and need to be re-written.

I get the feeling that the data you are receiving is not produced by yourself, but if you can request it is supplied in a usable format, you'll be able to write the code you need. If however you cannot change this, then you'll have to do some string manipulation to place the data items and values into groups you can use - but you will never know what that data really is - they'll just be strings.

As a hack, you could get each item Financial Info object (the key/value pairs), and when passing them through an 'each' function split the key on the underscore and check for your 'curr' and 'prev' values (or pair up the 'bldgs', 'land' etc.), then sum them accordingly. However, I noticed that there is also an 'expl' in one of the keys - this is why any changes may break what you do.

The only way to do this correctly would be to generate a proper JSON object that can tell you what the items are and what values they have. This is the purpose of structured data in models - a string and a value doesn't give you enough to work on.

So a rough example could be:

{
    'Executive Summary': "This is a test. Please ignore.",
    'Financial Info': {
      alt: { curr: "1000", prev: "500"},
      auto: {curr: "2100"},
      bldgs: {curr: "12000", prev: "5000"},
      land: {curr: "30000", prev: "700"},
      machine: {curr: "25000", prev: "1000"},
      other: {curr: "2659", prev: "6000", exp: { curr: "900", expl: "9800", prev: "600"}},
      startup: {curr: "600", prev: "550"},
    },
    ID: 12208
 }

Now you can loop through looking for all items with a 'curr' or 'prev' value, and sum them. Or you can sum the 'curr' and 'prev' for each item in the list. It won't matter what the items names are in the future - you read the name from the JSON object and display its summed values.

So, loop through each item outputting its name and summed values:

Land : "1500" (land.curr, land.prev)

Machine : "26,000" (machine.curr, machine.prev) etc.

Loop through all adding the 'curr', 'prev', and 'expl' as required:

Total Curr: 74,259 (alt.curr, auto.curr, bldgs.curr, land.curr, machine.curr, other.curr, other.exp.curr, and startup.curr)

Total Prev: 14,350 (alt.prev, bldgs.prev, land.prev, machine.prev, other.prev, other.exp.prev, startup.prev)

Total Expl: 9800 (other.exp.expl)

This is only a quick explanation, but you could also change the pure 'objects' above to arrays of 'Items' where each one has a 'Name' and an array of 'Data', each 'Data' item having a 'Type' and a 'Value'.