CODEWITHSUNDEEP
angularjs
Rodrigo Shiomi Shirota
Rodrigo Shiomi Shirota

Reputation: 11

Shopping Cart Application Using AngularJs controller

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!

Upvotes: 0

Views: 1379

Answers (2)

Praveen Soni
Praveen Soni

Reputation: 780

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>

Upvotes: 1

Rahul Sharma
Rahul Sharma

Reputation: 10071

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
]);

Upvotes: 0

Related Questions