Combining the elements of a nested array using AngularJS within a loop

Question

Combining the elements of a nested array using AngularJS within a loop

I attempted to showcase the values of AngularJS. Now I aim to aggregate all these values into its parent variable sum.

This is How my AngularJs Array Appears:

{  
   "isInternalInvoice":1,
   "name":"Invoices",
   "sum":50,
   "articles":[  
      {  
         "ID":"130.0000917-17.557000506.1",
         "betrag_netto":"20",
      },
      {  
         "ID":"130.0000917-17.557000581.1",
         "betrag_netto":"30"
      }
   ]
}

Snippet of Code:

<tr ng-repeat="invoice in currentInternalInvoices" >

 <input type="text" ng-model="invoice.betrag_netto"  />

</tr>

By making amendments in the textbox, it successfully updates the sum:

<input type="text" ng-model="$parent.data.sum" ng-bind="$parent.data.sum"  />

However, I wish to automatically add up all values as I type within the loop.

javascript arrays angularjs

Answer 1

Answer №1

Simply create a function that calculates the sum

$scope.calculateSum = function() {
  return $scope.data.articles.reduce((a, b) => a+Number(b.betrag_netto), 0);
}

Add an element to display the sum

<div>{{calculateSum()}}</div>

The value will update automatically whenever there are changes in the input boxes.

Check out this example on Plunker

Answer 2

Simply create a function that calculates the sum

$scope.calculateSum = function() {
  return $scope.data.articles.reduce((a, b) => a+Number(b.betrag_netto), 0);
}

Add an element to display the sum

<div>{{calculateSum()}}</div>

The value will update automatically whenever there are changes in the input boxes.

Check out this example on Plunker

Answer 3

Answer №2

To enhance the functionality, update the HTML by including an ng-change event listener that calculates the sum as the input field is modified.

<tr ng-repeat="invoice in currentInternalInvoices" >

 <input type="text" ng-model="invoice.betrag_netto" ng-change="calculateTotal()" />
</tr>
<input type="text" ng-model="data.totalAmount"   />

Implement this code in the controller to manage the summation process:

$scope.calculateTotal = function() {
    $scope.data.totalAmount = $scope.data.items.reduce((a, b) => a + Number(b.betrag_netto), 0);
}

Answer 4

To enhance the functionality, update the HTML by including an ng-change event listener that calculates the sum as the input field is modified.

<tr ng-repeat="invoice in currentInternalInvoices" >

 <input type="text" ng-model="invoice.betrag_netto" ng-change="calculateTotal()" />
</tr>
<input type="text" ng-model="data.totalAmount"   />

Implement this code in the controller to manage the summation process:

$scope.calculateTotal = function() {
    $scope.data.totalAmount = $scope.data.items.reduce((a, b) => a + Number(b.betrag_netto), 0);
}

Answer 5

Answer №3

To implement a unique solution, consider developing a personalized directive

(function() {
  "use strict";
  class CustomDirectiveController {
    constructor(dataService) {
      this.dataService = dataService;
      this.data = {
        total: 0
      }
    }
    $onInit() {
      this.data = this.dataService.fetch();

      console.info('executing');
    }

    static get $inject() {
      return ['dataService'];
    }

  }

  const customApp = angular.module('customApp', [])
    .service({
      dataService
    })
    .controller({
      CustomDirectiveController
    })
    .directive({
      calculateTotal
    });


  function calculateTotal() {
    return {
      restrict: 'A',
      bindToController: {
        total: '=',
        source: '=',
        by: '@',
      },
      scope: true,
      controller: class {

        $doCheck() {
          this.total = this.source.reduce((sum, {
            [this.by]: value
          }) => Number(sum) + Number(value), 0);
        }
      }
    }
  }

  function dataService() {
    return {
      fetch() {
        return {
          "isInternalInvoice": 1,
          "name": "Invoices",
          "total": 50,
          "items": [{
              "ID": "130.0000917-17.557000506.1",
              "net_amount": "20",
            },
            {
              "ID": "130.0000917-17.557000581.1",
              "net_amount": "30"
            }
          ]
        };
      }
    };
  }

}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="customApp" ng-controller="CustomDirectiveController as ctrl">
  <table total="ctrl.data.total" by="net_amount" source="ctrl.data.items">
    <tr ng-repeat="item in ctrl.data.items">
      <td>
        <input type="text" ng-model="item.net_amount">
      </td>
    </tr>

  </table>
  {{ctrl.data | json}}
  <div></div>
</div>

Answer 6

To implement a unique solution, consider developing a personalized directive

(function() {
  "use strict";
  class CustomDirectiveController {
    constructor(dataService) {
      this.dataService = dataService;
      this.data = {
        total: 0
      }
    }
    $onInit() {
      this.data = this.dataService.fetch();

      console.info('executing');
    }

    static get $inject() {
      return ['dataService'];
    }

  }

  const customApp = angular.module('customApp', [])
    .service({
      dataService
    })
    .controller({
      CustomDirectiveController
    })
    .directive({
      calculateTotal
    });


  function calculateTotal() {
    return {
      restrict: 'A',
      bindToController: {
        total: '=',
        source: '=',
        by: '@',
      },
      scope: true,
      controller: class {

        $doCheck() {
          this.total = this.source.reduce((sum, {
            [this.by]: value
          }) => Number(sum) + Number(value), 0);
        }
      }
    }
  }

  function dataService() {
    return {
      fetch() {
        return {
          "isInternalInvoice": 1,
          "name": "Invoices",
          "total": 50,
          "items": [{
              "ID": "130.0000917-17.557000506.1",
              "net_amount": "20",
            },
            {
              "ID": "130.0000917-17.557000581.1",
              "net_amount": "30"
            }
          ]
        };
      }
    };
  }

}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="customApp" ng-controller="CustomDirectiveController as ctrl">
  <table total="ctrl.data.total" by="net_amount" source="ctrl.data.items">
    <tr ng-repeat="item in ctrl.data.items">
      <td>
        <input type="text" ng-model="item.net_amount">
      </td>
    </tr>

  </table>
  {{ctrl.data | json}}
  <div></div>
</div>

Combining the elements of a nested array using AngularJS within a loop

Answer №1

Answer №2

Answer №3

Similar questions

Navigating to the end of a webpage using Vuetify

Combine table cells to improve readability on smaller screens

Issues with Ajax Requests

Angular's parent div height can be adjusted using CSS transitions

Background image fixed with scrolling effect

Launching an external JavaScript from within a separate JavaScript file

Displaying outcomes solely based on JSON upon choosing a filter

Negative values cannot be used as the starting point for a for loop

Is there a way to automatically refresh a webpage in HTML that encounters an error?

regex tips for updating URLs within CSS using JavaScript

Tips for utilizing the useState Hook in NextJs to manage several dropdown menus efficiently:

What is the purpose of the code snippet 'jQuery.each(lines, function(lineNo, line)'?

Accessing this.href from the ASP.NET code behind using Javascript

Leveraging Promises within if conditions

Why is it that TypeScript does not issue any complaints concerning specific variables which are undefined?

Attempting to alter the background image through the action of clicking on an image using jQuery, HTML, and CSS

Omit specific module from a webpack 4 chunk

Reordering div elements with JavaScript

What could be the reason for the page scrolling upwards when clicking on href="#"?

Freemarker substitute & and &ampersand;