How to remove (spliced) an element from nested JSON using AngularJS

Question

I have a nested JSON structured as follows:

[{ "phone_id" : "1", "phone_name" : "nokia", "phone_img" : "/src/imgs/nokia.jpg", "phone_comments" : [ { "comment_id" : "1", "user_id" : "32508", "comment_date" : "2001-02-01", "user_comment" : "This was the first phone that was rock solid from Nokia" }, { "comment_id" : "2", "user_id" : "32518", "comment_date" : "2001-02-02", "user_comment" : "Great phone before the smartphone age" }, { "comment_id" : "3", "user_id" : "22550", "comment_date" : "2002-04-01", "user_comment" : "Reminds me of my grandpa phone" }, { "comment_id" : "4", "user_id" : "31099", "comment_date" : "2001-05-11", "user_comment" : "It was a crappy one!" } ] } ] 

Display (works). I can display the phone image in the 1st column of the table and on ng-click. I load the second column with phone information with comments. It works great.

Removal (does not work). I have a question about deleting comments. I do not want to delete the entire telephone object, but only specific comments. Can I pass something like ???

 remove(comment, $index) 

and then has a function that performs the following actions:

 $scope.remove = function (index, comments) { alert(comments.user_comment + index); $scope.comments.splice(index, 1); } 

For reference, HTML looks something like this:

 <div ng-app="angularJSApp"> <div ng-controller="PhoneCtrl"> <br/><br/><br/> <table width="100%" border="1"> <tr ng-repeat="ph in phones"> <td width="20%"><a href="#" ng-click="showComments = ! showComments"><img width="50%" ng-src="{{ph.phone_img}}"></a></td> <td> <p>Phone Id: {{ph.phone_id}}</p> <p>Phone Name: {{ph.phone_name}}</p> <p>Number of comments: {{ph.phone_comments.length}}</p> <div class="shComments" ng-show="showComments"> <p>Search: <input ng-model="query"></p> <table border="1" width="100%"> <thead> <tr> <th><a href="" ng-click="predicate = 'comment_id'; reverse = !reverse">Id</a></th> <th><a href="" ng-click="predicate = 'user_comment'; reverse = false">Comment</a> (<a href="" ng-click="predicate = '-user_comment'; reverse = false">^</a>) </th> <th><a href="" ng-click="predicate = 'comment_date'; reverse = !reverse">Date</a></th> <th><a href="" ng-click="predicate = 'user_id'; reverse = !reverse">User</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="comment in ph.phone_comments | filter:query | orderBy:predicate:reverse"> <th>{{comment.comment_id}} <th>{{comment.user_comment}}</th> <th>{{comment.comment_date}}</th> <th>{{comment.user_id}}</th> <th><button ng-click="remove($index, comment)">Remove Comment</button> </tr> </tbody> </table> </div> </td> </tr> </table> </div> </div> 

PS: I experimented with AngularJS, and I ask about it after searching for solutions as much as I can. Thank you for your help.

Answer 1

You could, among other things, do the following:

 $scope.remove = function (index, comments) { delete $scope.comments[index] } 

Upon closer inspection, it seems that you have a nested data structure, which means that you need two indexes: one for the phone and one for the comment in the phone data structure.

So, you will need a method following the lines:

 $scope.remove = function (pIndex, cIndex) { delete $scope.phones[pIndex].phone_comments[cIndex]; } 

Another suggestion that I have outlined is that you should make phones a first-class citizen model and manage them through the service.

Answer 2

Thanks to both of you. The first sentence really worked.

 $scope.removeComment = function (pid, cid) { $scope.phones[pid].phone_comments.splice(cid, 1); }; 

and the call from HTML was

 <th><button ng-click="removeComment($parent.$index, $index)">Remove Comment</button> 

Answer 3

Problem, I found that you call ng-click="remove($index, comment) and pass 2 arguments: $index and comment selected.

However, the remove method works with index and a list of comments

 $scope.remove = function (index, comments) { alert(comments.user_comment + index); $scope.comments.splice(index, 1); } 

Change ng-click to:

 ng-click="remove($index, ph.phone_comments) 

The second way without $ index :

 ng-click="remove(comment, ph.phone_comments) 

Js

 $scope.remove = function(comment, comments) { comments.splice(comments.indexOf(comment), 1); }; 

[EDIT] *

See a working Plunker demo