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.

You have different data structures in your question, which one is correct? With nested objects or arrays? arr.splice(1,2) works with arrays, delete obj.field works with objects. — Makarov Sergey
– Makarov Sergey, Commented Sep 2, 2016 at 7:21
i am new to angularjs. i don't have much idea.i just want to remove element (0:req_good and qty) of let say 'Furniture & Fixture' from above json. Please can you show me a different data structures of above json and also how to make them of same structure. thank you — sanu
– sanu, Commented Sep 2, 2016 at 8:11

Abdul Mateen Mohammed · Accepted Answer · 2016-09-02 13:58:16Z

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>

edited Sep 2, 2016 at 13:58

answered Sep 2, 2016 at 10:17

Abdul Mateen Mohammed

1,8841 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sanu Over a year ago

thank you. one more question please how do i push a new array to choices

Abdul Mateen Mohammed Over a year ago

@sanu check the update, you can learn the basics of AngularJS from this course codeschool.com/courses/shaping-up-with-angular-js it is good for beginners

Abdul Mateen Mohammed · Accepted Answer · 2016-09-02 08:36:13Z

0

You can remove choice "1" of id 1 using the below code snippet.

var 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"
        }
    }
}];

function removeChoice(json, parentId, choice) {
  for (var i = 0; i < json.length; i++) {
    if (json[i].id === parentId) {
      delete json[i].choice[choice];
      break;
    }
  }
}

removeChoice(json, 1, "1");
console.log(json);

If you want the the choice also to be of the same type as its parent element i.e. an array you could change your JSON as follows and do as shown in the below code snippet to remove a choice from the JSON

var json = [
{
    "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"
    }]
}];

function removeChoice(json, parentId, choiceId) {
  for (var i = 0; i < json.length; i++) {
    if (json[i].id === parentId) {
      for (var j = 0; j < json[i].choices.length; j++) {
      	if (json[i].choices[j].id === choiceId) {
          json[i].choices.splice(j, 1);
          break;
        }
      }
      
      break;
    }
  }
}

removeChoice(json, 1, 1);
console.log(json);

In both of the above methods I've passed the source you want to modify as a parameter to the removeChoice function whereas you can also directly use a variable available within the scope of execution of the removeChoice function and pass only parentId and choiceId as parameters in the below code snippet, you can replace items with the object on your controller's $scope.If you prefer isolation of the code you can pass the items object as a parameter to the removeChoice function as it won't be dependent on the external components directly being used in the method body, I would suggest to have separation of concerns.

var 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"
    }]
}];

function removeChoice(parentId, choiceId) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].id === parentId) {
      for (var j = 0; j < items[i].choices.length; j++) {
      	if (items[i].choices[j].id === choiceId) {
          items[i].choices.splice(j, 1);
          break;
        }
      }
      
      break;
    }
  }
}

removeChoice(1, 1);
console.log(items);

edited Sep 2, 2016 at 8:36

answered Sep 2, 2016 at 8:15

Abdul Mateen Mohammed

1,8841 gold badge13 silver badges21 bronze badges

3 Comments

sanu Over a year ago

yes i use it like-> delete $scope.capital_budgets[parent_id].choice[id]; it delete the element but won't remove -> <button ng-hide="$first" ng-click="removeChoice($parent.$index,$index)">-</button> like we will do in splice any idea?

Abdul Mateen Mohammed Over a year ago

The splice function is used on an Array, are you using an Array for the choice object or a JavaScript object?

sanu Over a year ago

how do i make the choice array type i been trying this <input ng-model="cb.choice[$index].req_goods"> and this i think will make object type please see my above code thank you

Maheshvirus · Accepted Answer · 2016-09-02 08:40:52Z

0

Try This

 $scope.removeChoice = function(parent_id,id) {       

    var TempArr=[];
    var parentLength=$scope.choices[parent_id].length;
    for(i=0;i<parentLength;i++ ){
        if(parentLength[i]!==id){
            TempArr.push(parentLength[i]);
        }
        if(i==parentLength-1){
             $scope.choices[parent_id]=[];
            $scope.choices[parent_id]=TempArr;
        }
    }
 };

edited Sep 2, 2016 at 8:40

answered Sep 2, 2016 at 7:24

Maheshvirus

7,6312 gold badges45 silver badges46 bronze badges

1 Comment

Maheshvirus Over a year ago

Add $scope.choices[parent_id]=[]; before $scope.choices[parent_id]=TempArr; this and the check

Collectives™ on Stack Overflow

Angularjs Splice in Nested Array

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related