how to delete (splice) an element from nested JSON using AngularJS

Question

I have a nested JSON structured like this:

[{
"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's phone"

                        },
                        {
                            "comment_id" : "4",
                            "user_id" : "31099",
                            "comment_date" : "2001-05-11",
                            "user_comment" : "It was a crappy one!"

                        }
                    ]
}
]

Display part (works) - I m able to display the phone image on the 1st table column and on ng-click I load the second column with information about the phone with comments. This works perfectly fine.

Deletion (not working) - I have question about deleting comments. I do not want to be delete the whole phone object, but only specific comments. Can I pass something like ???

remove(comment, $index)

and then have a function that does the following?

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

For reference, the HTML looks something like :

<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>

P.S: I have been experimenting with AngularJS and I m asking this after having looked for solutions as much as I can. Thanks for your help.

rdodev · Accepted Answer · 2013-11-25 15:47:40Z

9

You could, among other things do the following:

$scope.remove = function (index, comments) {

    delete $scope.comments[index]
}

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

So what you would need is a method along the lines of:

$scope.remove = function (pIndex, cIndex) {

    delete $scope.phones[pIndex].phone_comments[cIndex];
}

One other suggestion I'd put forth is that you should make phones a first-class citizen model and manipulate them through a Service.

edited Nov 25, 2013 at 15:47

answered Nov 24, 2013 at 21:33

rdodev

3,2123 gold badges28 silver badges34 bronze badges

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

2 Comments

Anand Ram Over a year ago

Thanks for the response. But, that doesn't work for me. Can you please take a look at plnkr.co/edit/gcA5MgshB9wriGM9sKEF?p=preview

rdodev Over a year ago

The reason it doesn't work is because you need two indexes, one for the phone and one for the the comment within the the phone data structured. I have edited my answer to give you an idea.

Anand Ram · Accepted Answer · 2013-11-26 02:44:59Z

2

Thanks to both of you. The first suggestion actually worked.

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

and the call from the HTML was

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

answered Nov 26, 2013 at 2:44

Anand Ram

5352 gold badges8 silver badges12 bronze badges

1 Comment

Skice Over a year ago

A good practice is to bind $index to variables using ngInit (to avoid referring to the parent scope, as in $parent.$index). So in your example you would use <tr ng-repeat="ph in phones" ng-init="phoneIndex = $index"> and <tr ng-repeat="comment in ph.phone_comments ..." ng-init="commentIndex = $index"> and ng-click="removeComment(phoneIndex, commentIndex)" within your button tag.

Maxim Shoustin · Accepted Answer · 2013-11-25 06:07:05Z

1

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

However, remove method works with index and 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 working Demo Plunker

edited Nov 25, 2013 at 6:07

answered Nov 24, 2013 at 21:32

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

Anand Ram Over a year ago

Thanks for the response. But. that doesn't work for me. Can you please take a look at plnkr.co/edit/gcA5MgshB9wriGM9sKEF?p=preview

Collectives™ on Stack Overflow

how to delete (splice) an element from nested JSON using AngularJS

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related