Push and read inside and from nested arrays and ng-repeat them

Question

UPDATE 2: forked plnkr , it works.

---

UPDATE: plnkr

---

I'm trying to place an order inside an array, and display its items (and how many of them), but I don't know what I'm doing wrong. I just can't access the list of pizzas inside orderList with ng-repeat.

What my code should do is:

• read the menu stored inside an array
• click an item to store it inside another array
• if it's the first time that is being stored, assign n=1 to that element
• else n+=1
• display your order reading pizza.name and pizza.n from orderList
• remove items stored in orderList

code.javascript

$scope.orderList = [];

$scope.add = function(pizza) {
  var n;
  $scope.placeholder = 'Aggiungi altro?';
  if ($scope.orderList.indexOf(pizza) === -1) {
    $scope.orderList.pizza = [];
    n = 1;
    return $scope.orderList.pizza.push(pizza.name, n);
  } else {
    return $scope.orderList.pizza.n += 1;
  }
};

$scope.remove = function(pizza) {
  var index;
  index = $scope.orderList.indexOf(pizza);
  $scope.orderList.pizza.splice(index, 1);
  if ($scope.orderList.length === 0) {
    return $scope.example();
  }
};

form.html

<ul ng-hide="list" class="list">
  <li ng-repeat="pizza in pizze | filter:search | orderBy: 'name'">
    <button ng-click="add(pizza)" class="add">{{pizza.name}}<br>{{pizza.ingredients}}</button>
  </li>
</ul>
<ul ng-hide="order" class="list">
  <li ng-repeat="pizza in orderList">
    <button ng-click="remove()" class="add">Rimuovi {{pizza.name + ' x' + pizza.n}}</button>
  </li>
</ul>

Answer 1

Your code should actualy be something like this (this will actualy need some testing as i don't have the whole code) :

$scope.orderList = [];

$scope.add = function(pizza) {
    var n;
    $scope.placeholder = 'Aggiungi altro?';
    var index = $scope.orderList.map(function(item) {return item.name; }).indexOf(pizza.name);

    if (index != -1) {
        var n = 1;
        $scope.orderList[index] = {'n': n, 'name': pizza.name};

        return n;
    } 
    else {
         return $scope.orderList[index].n++;
    }
};

$scope.remove = function(pizzaName) {
     var index = $scope.orderList.map(function(item) {return item.name; }).indexOf(pizzaName);
    if(index != -1) {
        $scope.orderList.splice(index, 1);
    }
    return $scope.example();
};

And the html :

<ul ng-hide="list" class="list">
  <li ng-repeat="pizza in pizze | filter:search | orderBy: 'name'">
    <button ng-click="add(pizza)" class="add">{{pizza.name}}<br>{{pizza.ingredients}}</button>
  </li>
</ul>
<ul ng-hide="order" class="list">
  <li ng-repeat="pizza in orderList">
    <button ng-click="remove(pizza.name)" class="add">Rimuovi {{pizza.name + ' x' + pizza.n}}</button>
  </li>
</ul>

Answer 2

Should be able to simplify this down to

$scope.add = function(pizza) {
  pizza.n = (pizza.n || 0) +1; // count updates regardless if in array or not
  if ($scope.orderList.indexOf(pizza) === -1) {    
    $scope.orderList.push(pizza);    
  }// if already in array nothing to do
};

$scope.remove = function(pizza) {
  pizza.n = null;// just in case user puts it back into order
  var index = $scope.orderList.indexOf(pizza);
  if(index === -1) return;
  $scope.orderList.splice(index, 1);
  if (!$scope.orderList.length ) {
     $scope.example();
  }
};