In a peculiar occurrence, the behavior of array.splice is exhibiting unusual characteristics within an

Question

In a peculiar occurrence, the behavior of array.splice is exhibiting unusual characteristics within an

Be sure to take a look at this plunkr for reference:
http://plnkr.co/edit/FQ7m6HPGRrJ80bYpH8JB?p=preview

I'm encountering an issue where, after adding an element and then deleting it from the array using the splice method, everything becomes disorganized.

code

javascript arrays angularjs angularjs-directive

Answer 1

Answer №1

In order to use the <code>splice function with an array, it's important to pass in a valid array index. The issue in your code is that you are passing ngModel.index to the removeNode function and using it as the index to splice the array, which is not the correct array index.

To resolve this problem, you should iterate through the elements of the array and check the index property of each element to find the actual index. In my example, I used angular.forEach, where the second parameter provides the real index of the array element.

Here is the corrected code:

$scope.removeNode = function(index) {
    var foundIndex;
    angular.forEach($scope.sitemap, function(value, idx){
        if(value.index === index)
            foundIndex = idx;
    })

    $scope.sitemap.splice(foundIndex, 1);
}

Check out the Demo Here

Answer 2

In order to use the <code>splice function with an array, it's important to pass in a valid array index. The issue in your code is that you are passing ngModel.index to the removeNode function and using it as the index to splice the array, which is not the correct array index.

To resolve this problem, you should iterate through the elements of the array and check the index property of each element to find the actual index. In my example, I used angular.forEach, where the second parameter provides the real index of the array element.

Here is the corrected code:

$scope.removeNode = function(index) {
    var foundIndex;
    angular.forEach($scope.sitemap, function(value, idx){
        if(value.index === index)
            foundIndex = idx;
    })

    $scope.sitemap.splice(foundIndex, 1);
}

Check out the Demo Here

Answer 3

Answer №2

When you create a new object, you assign a hardcoded index value of "abc" to each object.

var abc = 0;
$scope.addNode = function(){
    abc++;
    var addObj = {name:"name"+abc, index:abc};
    $scope.sitemap.push(angular.copy(addObj));
}

Subsequently, when you remove an object, you use this hardcoded index value in the function.

$scope.removeNode = function(index){
    $scope.sitemap.splice(index,1);                     
}

For instance, if you have the following array:

obj1 - hardcoded index 0 - array index 0
obj2 - hardcoded index 1 - array index 1

If you remove obj1 from array with index 0, obj2 will take its place at index 0 in the array, like so:

obj2 - hardcoded index 1 - array index 0

However, even though the actual index has changed, you are still passing index 1 to the removeNode function as it was created with that value.

Answer 4

When you create a new object, you assign a hardcoded index value of "abc" to each object.

var abc = 0;
$scope.addNode = function(){
    abc++;
    var addObj = {name:"name"+abc, index:abc};
    $scope.sitemap.push(angular.copy(addObj));
}

Subsequently, when you remove an object, you use this hardcoded index value in the function.

$scope.removeNode = function(index){
    $scope.sitemap.splice(index,1);                     
}

For instance, if you have the following array:

obj1 - hardcoded index 0 - array index 0
obj2 - hardcoded index 1 - array index 1

If you remove obj1 from array with index 0, obj2 will take its place at index 0 in the array, like so:

obj2 - hardcoded index 1 - array index 0

However, even though the actual index has changed, you are still passing index 1 to the removeNode function as it was created with that value.

Answer 5

Answer №3

Here is an alternative solution I recommend: Demo

In my perspective:

sitemap should not be defined within the current directive (sample), as it belongs to a list item and not the list itself.
Additionally, you have an addNode method in your controller. It would be beneficial to also include a removeNode method.

You can access the controller's methods within the directive using

removeAction: '&removeAction',

:

scope: {
    ngModel: "=ngModel",//or "="
    removeAction: '&removeAction',//or "&"
  },
  controller: ["$scope", function($scope) {
    $scope.removeNode = function(item) {
      $scope.removeAction({
        item: item
      });
    }
  }],

Answer 6

Here is an alternative solution I recommend: Demo

In my perspective:

sitemap should not be defined within the current directive (sample), as it belongs to a list item and not the list itself.
Additionally, you have an addNode method in your controller. It would be beneficial to also include a removeNode method.

You can access the controller's methods within the directive using

removeAction: '&removeAction',

:

scope: {
    ngModel: "=ngModel",//or "="
    removeAction: '&removeAction',//or "&"
  },
  controller: ["$scope", function($scope) {
    $scope.removeNode = function(item) {
      $scope.removeAction({
        item: item
      });
    }
  }],

In a peculiar occurrence, the behavior of array.splice is exhibiting unusual characteristics within an

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to refresh my useEffect hook when a State change occurs in another component's file in ReactJS?

Store the information retrieved from an Ajax call regarding an artist on the page, ensuring that it is only saved once for that

`Developing reusable TypeScript code for both Node.js and Vue.js`

Create a selection menu in an HTML dropdown list using unique values from a JSON object that is separated by commas

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

Using v-model to dynamically update the router based on certain conditions

Instructions for linking a directive in Angular JS to a model containing keys that are generated dynamically

Transferring binary fragments to Node.js for assembly into a complete file. Creating a file

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

Updating Vue component property when Vuex store state changes: A step-by-step guide

Issues with the initial drop functionality in jQuery UI

What is the best way to position the left sidebar on top of the other components and shift them to the

In PHP, extract the initial three characters from each item within a foreach loop

Unable to establish communication with server. Facing issues in connecting AngularJS with NodeJS

I am experiencing issues with the button click functionality in my Google extension

Accessing the observable's value by subscribing to it

Building a Dynamic CSS Grid

Dynamic horizontal scrolling

Adding Multiple Items to an Express Endpoint