Angularjs Splice in Nested Array

Question

Hi can somebody help Removing element from nested json array like this

JSON

[{
    "id": 1,
    "name": "Furniture & Fixture",
    "choice": {
        "0": {
            "req_goods": "table",
            "qty": "10"
        },
        "1": {
            "req_goods": "chair",
            "qty": "5"
        }
    }
}, {
    "id": 2,
    "name": "Miscellaneous Property",
    "choice": {
        "0": {
            "req_goods": "Office Rent",
            "qty": "1"
        }
    }
}]

here how do I remove choice 1 of id 1 .

HTML

<div ng-repeat="cb in capital_budgets">
    <div ng-repeat="choice in choices[$index]">
        <input ng-model="cb.choice[$index].req_goods">
        <input ng-model="cb.choice[$index].qty">
        <button ng-hide="$first" ng-click="removeChoice($parent.$index,$index)">-</button>
    </div>
    <button ng-click="addNewChoice($index)">+</button>
</div>

JS

$scope.capital_budgets = [{"id":1,"name":"Furniture & Fixture"},
                          {"id":2,"name":"Miscellaneous Property"}];
    $scope.choices = [{}];
    $scope.choices[0] = [{}];
    $scope.choices[1] = [{}];
    $scope.choices[2] = [{}];
    $scope.choices[3] = [{}];
    $scope.choices[4] = [{}];

    $scope.addNewChoice = function(id) {
        $scope.choices[id].push({});
    };

    $scope.removeChoice = function(parent_id, id) {
        $scope.choices[parent_id].splice(id, 1);
    };

The Above removeChoice() remove last element but I want to remove the element that user choose to remove. please help i have been trying from 2 days.

Answer 1

You can make 'choice' of the array type as follows and use the index of the particular choice in the ng-repeat directive to remove the choice from the choices array.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.items = [
    {
        "id": 1,
        "name": "Furniture & Fixture",
        "choices": [
        {
          "id": 1,
          "req_goods": "table",
          "qty": "10"
        },
        {
          "id": 2,
          "req_goods": "chair",
          "qty": "5"
        }]
    }, {
        "id": 2,
        "name": "Miscellaneous Property",
        "choices": [
        {
          "id": 1,
          "req_goods": "Office Rent",
          "qty": "1"
        }]
    }];
    
    vm.removeChoice = removeChoice;
    vm.addChoice = addChoice;
    
    function removeChoice(itemId, index) {
      for (var i = 0; i < vm.items.length; i++) {
        if (vm.items[i].id === itemId) {
          vm.items[i].choices.splice(index, 1);
          break;
        }
      }
    }
    
    function addChoice(index) {
      var id = vm.items[index].choices.length + 1;
      vm.items[index].choices.push({
        id: id,
        req_goods: "",
        qty: 0
      });
    }
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div ng-repeat="item in ctrl.items">
      <h3>{{item.name}}</h3>
      <div ng-repeat="choice in item.choices">
        <input type="text" ng-model="choice.req_goods" />
        <input type="text" ng-model="choice.qty" />
        <button type="button" ng-click="ctrl.removeChoice(item.id, $index)">Remove</button>
      </div>
      <button type="button" ng-click="ctrl.addChoice($index)">Add</button>
    </div>
  </div>
</div>