"Is there a way to eliminate an object from $scope without having to loop through the

Question

"Is there a way to eliminate an object from $scope without having to loop through the

I have a jsfiddle that you can check out here.

In the fiddle, we are able to add new nodes and delete all children in the parent node. However, my question is how can I delete a specific child without having to iterate through the array? I am aware that we have a method called Array.prototype.splice() that can be used for this purpose.

Array.prototype.splice()

If we want to remove a particular object like the one shown in screenshot #1, we can obtain its index and use the splice() method.

https://i.sstatic.net/RAwh2.png

But what if I want to remove a deeply nested object without iterating through the entire array for performance reasons?

https://i.sstatic.net/6IpvM.png

Currently, when I console.log, I only see:

Object { name: "Node-8-6-2", menu: false, $$hashKey: "object:151" }

This means I do not have direct access to the nodes of the parent array, and hence need to iterate through the entire array to remove it.

Does anyone have a solution to this problem?

javascript arrays angularjs object

Answer 1

Answer №1

Your updated Plunker can be found here: http://jsfiddle.net/marduke182/uXbn6/2828/

Key modifications include:

Including parent references to the object using parentNodes.


$scope.add = function(data) {
    var post = data.nodes.length + 1;
    var newName = data.name + '-' + post;
    data.nodes.push({name: newName, nodes: [], parentNodes: data.nodes});
};

Implementing a delete node method that removes the specified index from the parentNodes array:


$scope.delete_node = function(data, index) {
    data.parentNodes.splice(index, 1);
};

Adding the new method to the template:


<script type="text/ng-template" id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <button ng-click="delete_node(data, $index)" >Delete node {{$index}}</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

Answer 2

Your updated Plunker can be found here: http://jsfiddle.net/marduke182/uXbn6/2828/

Key modifications include:

Including parent references to the object using parentNodes.


$scope.add = function(data) {
    var post = data.nodes.length + 1;
    var newName = data.name + '-' + post;
    data.nodes.push({name: newName, nodes: [], parentNodes: data.nodes});
};

Implementing a delete node method that removes the specified index from the parentNodes array:


$scope.delete_node = function(data, index) {
    data.parentNodes.splice(index, 1);
};

Adding the new method to the template:


<script type="text/ng-template" id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <button ng-click="delete_node(data, $index)" >Delete node {{$index}}</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

Answer 3

Answer №2

When creating a hierarchy within your data structure, consider including a parent attribute in your arrays:

var parentNode = [];
var node = [];
node.parent = parentNode;
parentNode.push(node);

If you wish to delete the node, use the following code:

var index = node.parent.indexOf(node);
node.parent.splice(index, 1);

Answer 4

When creating a hierarchy within your data structure, consider including a parent attribute in your arrays:

var parentNode = [];
var node = [];
node.parent = parentNode;
parentNode.push(node);

If you wish to delete the node, use the following code:

var index = node.parent.indexOf(node);
node.parent.splice(index, 1);

"Is there a way to eliminate an object from $scope without having to loop through the

Answer №1

Answer №2

Similar questions

Combining two arrays from the same collection in MongoDB to create a new field (similar to a Left Join in relational databases)

Angular will hold off until the subscribe operation has completed before passing values to another function

Unable to upload the file using AJAX

Launching a Nuxt.js Cloud Function

Accessing class properties from JavaScript code

Selecting a HEX code from a color picker to configure three.js as a string

"Changing a Java script base addon file to a customized addon in Odoo 16: A step-by-step guide

Tips for identifying truncated text when resizing the td element

Getting the value of an anchor tag in Laravel and utilizing it within an input field

Refreshing the form fields and storing the information using AngularJS

Passing and removing array parameters in HTTP requests using Angular

What is an alternative method to retrieve form data without relying on bodyParser?

Wrapping up the HTML click design, throughout the extensive project

Steps for submitting a form using Bootstrap 4

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

Simultaneous appearance of multiple jQuery dialogs

Creating a custom Jquery function to generate a Div element instead of a Textbox in your web application

Accessing JSON data and populating a dropdown menu with JQuery

Renaming properties in an AngularJS model

Angular.js, implementing form validation upon submission only