How to add values from an Object Attributes and display them in AngularJS

Question

How to add values from an Object Attributes and display them in AngularJS

197 views Asked by TheOneWhoIsLost At 06 April 2020 at 19:20

I'm writing an application where it allows you to add and remove books. It calculates the total value of the book per row. I'm trying to add up all the prices within the $scope.books.price, but i can't seem to wrap my head around how to write the for loop.

The object atrributes are:

title:
qty:
price:

I would like to display the overall total of the prices from the object array and display them in the table header total cell.

How could iterate through the object to capture the prices and to display on the header?

<!doctype html>
<html lang='en' ng-app>
  <head>
   <title>Book Shopping Cart</title>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script>
  <script>
    function CartControler($scope) {
      $scope.books = [
        {title: 'Absolute Java',    
            qty: 1, price: 114.95},
        {title: 'Pro HTML5',        
            qty: 1, price: 27.95},
        {title: 'Head First HTML5', 
            qty: 1, price: 27.89}
      ];
      // need help with this portion can't seem to get the prices to print out
      $scope.totalPrice = function() {
        for (i=0; i < $scope.books.length; i++) {
          $scope.totalPrice += $scope.books.price[i];
        }
      }

      $scope.addBook = function (index) {
        console.log("add new book");
        $scope.books.push({title: 'New Book', qty: 1, price: 10.99});
      }

      $scope.removeBook = function(index) {
        $scope.books.splice(index, 1);
      }

    }
  </script>
  <link rel="stylesheet" href="css/ex05.css">
  </head>

  <body ng-controller="CartControler">

    <table>
      <caption><b>My Books</b></caption>
      <thead>
        <tr>
            <th>Title</th>
            <th>Qty</th>
            <th>UnitPrice</th>
            <th>Line Total</th>
            <th>Total {{totalPrice | currency}}</th> <!--I would like to display overall total here-->
        </tr>
      </thead>
      <tbody >
        <tr ng-repeat="book in books">
            <td><input ng-model="book.title"></td>
            <td>
                <input ng-model="book.qty" size="2">
            </td>
            <td>
                <input ng-model="book.price" >
            </td>
            <td>{{book.price * book.qty | currency}}</td>
            <td>
                <button ng-click="removeBook($index)">
                    Remove
                </button>
            </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>
            <button ng-click="addBook($index)">New</button>
          </th>
          <th></th>
          <th></th>
          <th>
            <button ng-click="">Save</button>
          </th>
          <th></th>

        </tr>
      </tfoot>
    </table>
  </body>
</html>

Original Q&A

There are 1 answers

**Scaramouche** · Accepted Answer · 2020-04-06 19:29:37

Initialize $scope.totalPrice using the current books prices (no need for it to be a function), then use addBook and removeBook functions to update $scope.totalPrice.

EDIT:

Since $scope.totalPrice will be affected in several ways, not just adding and removing books, but also changing a book's quantity and price, then it's necessary to execute the update code in several places. Like this:

function CartControler($scope) {
      $scope.books = [
        {title: 'Absolute Java',    
            qty: 1, price: 114.95},
        {title: 'Pro HTML5',        
            qty: 1, price: 27.95},
        {title: 'Head First HTML5', 
            qty: 1, price: 27.89}
      ];
     
      $scope.addBook = function (index) {
        const newBook = {title: 'New Book', qty: 1, price: 10.99};
        $scope.books.push(newBook);
        $scope.totalPrice += newBook.price  * newBook.qty;
      }

      $scope.removeBook = function(index) {
        const bookToRemove = $scope.books[index];
        $scope.books.splice(index, 1);
        $scope.totalPrice -= bookToRemove.price * bookToRemove.qty;
      }
      
      $scope.updateTotal = function() {
        $scope.totalPrice = 0;
        for (i=0; i < $scope.books.length; i++) {
            $scope.totalPrice += ($scope.books[i].price * $scope.books[i].qty);
        }
     }
     
           $scope.updateTotal()

    }

<!doctype html>
<html lang='en' ng-app>
  <head>
   <title>Book Shopping Cart</title>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js"></script>

  <link rel="stylesheet" href="css/ex05.css">
  </head>

  <body ng-controller="CartControler">

    <table>
      <caption><b>My Books</b></caption>
      <thead>
        <tr>
            <th>Title</th>
            <th>Qty</th>
            <th>UnitPrice</th>
            <th>Line Total</th>
            <th>Total {{totalPrice | currency}}</th> <!--I would like to display overall total here-->
        </tr>
      </thead>
      <tbody >
        <tr ng-repeat="book in books">
            <td><input ng-model="book.title"></td>
            <td>
                <input ng-model="book.qty" size="2" ng-change="updateTotal()">
            </td>
            <td>
                <input ng-model="book.price" ng-change="updateTotal()">
            </td>
            <td>{{book.price * book.qty | currency}}</td>
            <td>
                <button ng-click="removeBook($index)">
                    Remove
                </button>
            </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>
            <button ng-click="addBook($index)">New</button>
          </th>
          <th></th>
          <th></th>
          <th>
            <button ng-click="">Save</button>
          </th>
          <th></th>

        </tr>
      </tfoot>
    </table>
  </body>
</html>

TechQA.

How to add values from an Object Attributes and display them in AngularJS

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in FUNCTION

Related Questions in FOR-LOOP

Related Questions in NG-APP

Popular Questions

Popular Tags

Trending Questions