Shopping Cart Application Using AngularJs controller

Question

I'm doing a shopping cart with AngularJs, but I'm having trouble adding products to the shopping cart. I think error is on my Controller:

My data.json:

{
"items": [
    {
        "product": {
            "name": "Smartphone",
            "price": {
                "value": 3509.10,
            }
        }
    },
    
    {
        "product": {

            "name": "Lenovo ",
            "price": {
                "value": 2599.00,
               
            }
        }
    }
]
}

my controller.js :

var app = angular.module("list", []);
app.controller("ListCtrl", ["$scope", "$http", function($scope, $http) {
  $scope.products = [];
  $http({ method: 'GET', url: 'data.json'})
    .success(function(data) {
      angular.forEach(data.items, function(item, index) {
        $scope.products.push(item.product);
      });
    });
  }
  $scope.carts=[];
  $scope.add_cart = function(product){
  if(product){
    $scope.carts.push({ p_name: product.name, p_valor:product.price.value,);
  } 
}

$scope.total = 0;

$scope.setTotals = function(cart){
  if(cart){
    $scope.total += cart.p_valor;
  }
}

$scope.remove_cart = function(cart){
  if(cart){
    $scope.carts.splice($scope.carts.indexOf(cart), 1);
    $scope.total -= cart.p_valor;
  }
}
]);

my html:

    <body  ng-controller="ListCtrl" ng-app="list">
     <ul ng-repeat="product in products">
        <li>{{product.name}} </li>
        <li>{{product.price.value}}</li>
        <li><button type = "button" ng-click = "add_cart(product)"> Add to cart</button></li>
    </ul><br>
    <ul ng-repeat = "cart in carts" ng-init = "setTotals(cart)">
       <li>{{cart.p_name}}</li>
       <li>{{cart.p_price}}</li> 
       <li><button type = "button" ng-click = "remove_cart(cart)">X</button>
       </li>
    </ul>
    <ul>
      <li>{{total}}</li>
    </ul>
   </body>

I need the button add to cart to work correctly, bringing the product name and the value of the product. I also need it to bring the total value and also need to remove the product when clicking button remove cart.

Ty for Help guys!

what happens when you press the button? are there any logs? do you see any exceptions? Try adding log messages to follow flow of the program — Bojan Petkovic, Feb 12 '18 at 15:22
Note: constantly adding an removing products will add and subtract the numbers with the [floating point error](https://en.wikipedia.org/wiki/Floating-point_arithmetic#Accuracy_problems). Instead you should sum them together from the populated list `carts` with: `$scope.total = $scope.carts.reduce((x,y)=>{return x+y["p_valor"]},0);`. — Aleksey Solovey, Feb 12 '18 at 15:54

score 1 · Answer 1 · edited May 03 '23 at 17:37

your controller.js file contain some syntax error. please check for any typo or syntax error in code before you throw your code into stackoverflow 's basket.
anyway, there are some point you need to remember when code.

camelCase is recommended in javascript. as per conventions
each function should dedicated to perform a specific task (personal opinion)
it's good to follow styleguide angularjs & javascript
$scope, and $watch is for data binding, so you can use data in template or in other scopes like directive. data-binding is great and primary selling point of AngularJs, but it has some drawbacks.
and power comes with great responsibility. :wink

please have a look, here is a working live demo of your code.

var app = angular.module("list", []);
ListController.$inject = ["$scope", "$http"];
app.controller("ListCtrl", ListController);

function ListController($scope, $http) {

  function onLoad() {
    $scope.products = [];
    $scope.carts = [];
    $scope.total = 0;

    // getProducts();
    demoData();
  }

  onLoad();

  $scope.addCart = addCart;
  $scope.getTotals = getTotals;
  $scope.removeCart = removeCart;

  // hould remove when using in prod
  function demoData() {
    var data = {
      "items": [{
        "product": {
          "name": "Smartphone",
          "price": {
              "value": 3509.10,
          }
        }
      },
      {
        "product": {

            "name": "Lenovo ",
            "price": {
                "value": 2599.00,

            }
        }
      }]
    }
    parseProducts(data.items);
  }

  function getProducts() {
    $http.get('data.json')
      .success(function(data) { parseProducts(data.items) })
  }

  function parseProducts(items) {
    angular.forEach(items, function(item, index) {
      $scope.products.push(item.product);
    });
  }

  function addCart(product){
    if(product){
      $scope.carts.push({ 
        p_name: product.name, 
        p_price:product.price.value
      });
    } 
  }

  function getTotals(){
    var initialValue = 0;
    $scope.total = $scope.carts.reduce((x,y) => x + y["p_price"], initialValue);
  }

  function removeCart(i){
    $scope.carts.splice(i, 1);
    getTotals();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="list" ng-controller="ListCtrl">
  <ul ng-repeat="product in products">
    <li>{{product.name}} </li>
    <li>{{product.price.value}}</li>
    <li><button type = "button" ng-click = "addCart(product)"> Add to cart</button></li>
  </ul>
  <br>
  <ul ng-repeat="cart in carts track by $index" ng-init = "getTotals(cart)">
    <li>{{cart.p_name}}</li>
    <li>{{cart.p_price}}</li> 
    <li><button type = "button" ng-click = "removeCart($index)">X</button></li>
  </ul>
  <ul>
    <li>{{total}}</li>
  </ul>
  <button ng-click="getTotals()">get totals</button>
</body>

welcome, if you found it useful, you can select it as answer or upvote it, so others can take leverage of it. — Praveen Soni, Feb 12 '18 at 18:32

score 0 · Answer 2 · edited Feb 12 '18 at 15:55

I found some Syntax error

var app = angular.module("list", []);
app.controller("ListCtrl", ["$scope", "$http",
  function ($scope, $http) {
    $scope.products = [];
    $http({
      method: 'GET',
      url: 'data.json'
    }).success(function (data) {
      angular.forEach(data.items, function (item, index) {
        $scope.products.push(item.product);
      });
    });
    $scope.carts = [];
    $scope.add_cart = function (product) {
      if (product) { 
        $scope.carts.push({
          p_name: product.name,
          p_valor: product.price.value,
        }); //Here syntax err
      }
    }

    $scope.total = 0;

    $scope.setTotals = function (cart) {
    if (cart) {
      $scope.total += cart.p_valor;
    }
  }

  $scope.remove_cart = function (cart) {
            if (cart) {
                $scope.carts.splice($scope.carts.indexOf(cart), 1);
                $scope.total -= cart.p_valor;
            }
        }
    }  //Here syntax err
]);

Shopping Cart Application Using AngularJs controller

2 Answers2