Guide for eliminating a specific row from a list in AngularJS

Question

Guide for eliminating a specific row from a list in AngularJS

Despite my thorough search, I couldn't find a solution to my problem of deleting the CORRECT row from the list.

Let's say I have the following array:

$scope.rows = [{
        "ID": 12,
        "customer": "abc",
        "image": "abc.jpg",
},{
        "ID": 13,
        "customer": "klm",
        "image": "klm.jpg",
},{
        "ID": 14,
        "customer": "xyz",
        "image": "xyz.jpg",
}];

I'm attempting to delete the row with ID = 13 (the ID will be received from the server) using the following code:

Socket.on('delete', function( ID ) {

            var index = $scope.rows.findIndex(item => item.ID === ID);
            $scope.rows.splice(index, 1);

        });

However, this doesn't actually remove the correct row.

How can I specify the parameter to correctly delete the desired row like this:

remove rows("ID" = ID)

javascript angularjs array-splice

Answer 1

Answer №1

searchArray function to find the index of a specific element in an array (without using relational arrays)

Give this a try:

let targetIndex = null;
angular.forEach($scope.items, function(item, index) {
  if (item.ID === currentItemID) {
     targetIndex = index;
  }
});

$scope.items.splice(targetIndex, 1);

Answer 2

searchArray function to find the index of a specific element in an array (without using relational arrays)

Give this a try:

let targetIndex = null;
angular.forEach($scope.items, function(item, index) {
  if (item.ID === currentItemID) {
     targetIndex = index;
  }
});

$scope.items.splice(targetIndex, 1);

Answer 3

Answer №2

To delete a selected item:

<a href="#" ng-click="remove($index)">Delete item</a>                     //automatically generated link through ng-repeat

 $scope.remove = function (item) {
        $scope.retrieveddata.splice(item, 1);
    }

You can remove the current item by its index. ($scope .retreiveddata is the array list used)

Answer 4

To delete a selected item:

<a href="#" ng-click="remove($index)">Delete item</a>                     //automatically generated link through ng-repeat

 $scope.remove = function (item) {
        $scope.retrieveddata.splice(item, 1);
    }

You can remove the current item by its index. ($scope .retreiveddata is the array list used)

Answer 5

Answer №3

provide the ID as a parameter for this function

$scope.removeId = function (identifier) {
    for (var j = 0; j <= $scope.line.length; j++) {
        if ($scope.line[j].id == identifier) {
            $scope.line.splice(j, 1);
        }
    }
};

alternatively

$scope.removeId = function (identifier) {
    angular.forEach($scope.line, function (item, idx) {
        if (item.id == identifier) {
            $scope.line.splice(idx, 1);
        }
    });
};

Answer 6

provide the ID as a parameter for this function

$scope.removeId = function (identifier) {
    for (var j = 0; j <= $scope.line.length; j++) {
        if ($scope.line[j].id == identifier) {
            $scope.line.splice(j, 1);
        }
    }
};

alternatively

$scope.removeId = function (identifier) {
    angular.forEach($scope.line, function (item, idx) {
        if (item.id == identifier) {
            $scope.line.splice(idx, 1);
        }
    });
};

Guide for eliminating a specific row from a list in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Using angularjs, populate a dropdown menu by enclosing the options in curly braces

Enhance your Angular2 Directive

Every initial test with Protractor ends in failure

Error: Unable to process reduction on ships - function "reduce" is not functional

Node - Employing the exported function within the current file

Accessing Promise.all in the rejection function is not allowed

Modify visibility or enable state of a text box according to a checkbox in PHP

Filtering out elements from an array using a set of specified values

Troubleshooting Asynchronous Code in JavaScript

Does getServerSideProps execute for each page request, or solely for HTTP requests?

jQuery returns varying values for checked status when using click() method versus manual click

What is the best way to resize an element such as an image?

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Obtaining static images from the public directory with getStaticProps in Next.js

Challenges when utilizing the command "npm install" within a programmatic context

Brochure displaying shattered tiles using ionic

Utilizing Vue.js 2.x to send a REST API request with a collection of objects

Adjust the size at the location of the cursor

Troubleshooting: Issue with Firebase callable function execution

Ways to Deduct 10 Days from a Date using JavaScript