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

Sort through an array containing JavaScript objects in order to filter out certain elements that match a different

What is the method for submitting a POST request with a JSON body that consists of only a string, without any key-value pairs included?

Is there a way to apply an event function after adding elements through append?

Vue.js filters items based on their property being less than or equal to the input value

Modify the design of the button in the CSS code

Hover and hover-off functions in navigation menu

Exploring timezones using moment.js

ui-router: Converting URL parameters

Verify the Ajax submission of a post request prior to transmitting any data

Bash Array Looping in a for statement

I am in need of eliminating repetitive comments from each post

Guide to properly deserializing a JSON string into a class with a nested List of different class members

The 'v-model' directive necessitates a valid attribute value for the left-hand side (LHS)

Issue with transmitting Razor form data to API controller using fetch or AJAX

Tips for automatically closing all other divs when one is opened

Customizing data attributes for child components in Vue 2

JavaScript - Unable to Modify Select Value with Event Listener

[.TextureUnitWarning] ALERT: Unit 1 is lacking a texture binding for rendering test.html:1

Update an API call to switch from promises to observables, implementing axios

Error in hook order occurs when rendering various components