Extract item from the collection

Question

Extract item from the collection

I am struggling with the following code:

app.controller('modalController', function($scope, $http,$modalInstance, $rootScope, items){

   // Retrieving information
   $http.post('/ajax/bundle', {'items':items}).success(function(data){
       $scope.info = data['info'];
   });

   // [BUTTON] Add Bundle
   $scope.selectBundle = function() {

        // Adding info to the cart
        $rootScope.cart.push($scope.info);
        // Simplified info
        $rootScope.selectedBundle.push(items)
        // Closing the modal
        $modalInstance.close();
   }

   // [BUTTON] Remove bundle
   $scope.removeBundle = function() {
        // Iterating through all selected bundles
        angular.forEach($rootScope.selectedBundle,function(value, key){
           // Checking if exists
           if (angular.equals(value,items)) {
               // Removing from simplified info
               $rootScope.selectedBundle.splice($rootScope.selectedBundle.indexOf(value), 1);
               // removing from cart
               // $rootScope.cart.splice($rootScope.cart.indexOf($scope.info), 1);
           }
       });

       // Closing the modal
       $modalInstance.close();
   }
});

After using:

console.log($rootScope.cart);
console.log($scope.dados);
console.log($rootScope.cart.indexOf($scope.dados));

the console logs the correct position within $scope.selectBundle.

However, when used in $scope.removeBundle, it always returns -1 indicating that it's not found. Can anyone provide some guidance or help me troubleshoot this issue?

javascript angularjs

Answer 1

Answer №1

Why not just empty the array instead of searching for index?

// [BUTTON] Remove bundle
$scope.removeBundle = function() {
     $rootScope.selectedBundle = [];
     $modalInstance.close();
}

Another approach: Using angular.forEach to iterate through the array and splice elements out.

$scope.removeBundle = function() {
    angular.forEach($rootScope.selectedBundle,function(value, index){
        $rootScope.selectedBundle.splice(index, 1);
    });

   $modalInstance.close();

}

Answer 2

Why not just empty the array instead of searching for index?

// [BUTTON] Remove bundle
$scope.removeBundle = function() {
     $rootScope.selectedBundle = [];
     $modalInstance.close();
}

Another approach: Using angular.forEach to iterate through the array and splice elements out.

$scope.removeBundle = function() {
    angular.forEach($rootScope.selectedBundle,function(value, index){
        $rootScope.selectedBundle.splice(index, 1);
    });

   $modalInstance.close();

}

Answer 3

Answer №2

It's possible that there is an issue with your equality function. Have you considered creating a jsFiddle or Plunker to troubleshoot? In the meantime, you can try passing the item you want removed into the calling function like this:

// [BUTTON] Delete package
$scope.deletePackage = function(itemToDelete) {
    console.log(itemToDelete); // pass item to delete
    angular.forEach($rootScope.selectedBundle, function(value, key){
       // Check if item exists
       if (value === itemToDelete) {
           $rootScope.selectedBundle.splice($rootScope.selectedBundle.indexOf(value), 1);
       }
    });

    // Close modal
    $modalInstance.close();
}

Answer 4

It's possible that there is an issue with your equality function. Have you considered creating a jsFiddle or Plunker to troubleshoot? In the meantime, you can try passing the item you want removed into the calling function like this:

// [BUTTON] Delete package
$scope.deletePackage = function(itemToDelete) {
    console.log(itemToDelete); // pass item to delete
    angular.forEach($rootScope.selectedBundle, function(value, key){
       // Check if item exists
       if (value === itemToDelete) {
           $rootScope.selectedBundle.splice($rootScope.selectedBundle.indexOf(value), 1);
       }
    });

    // Close modal
    $modalInstance.close();
}

Extract item from the collection

Answer №1

Answer №2

Similar questions

The ng-Options feature does not update the connected label when the drop-down selection is changed

Maximizing Efficiency with React.js Search Bar API

Tips for running multiple .js test files simultaneously with npm (pact files)

Calculate the total cost for each row in a table by multiplying the quantity and price using jQuery, then display the result

Revamping a design using Mustache js

Why doesn't express.js throw an error when the variable 'app' is used within its own definition?

Guide to dynamically updating objects-array by adding new elements with an event listener and displaying the changes on an HTML page

Tips for accessing JSON values in JavaScript

How to retrieve the chosen option from a drop-down menu in WebDriver using JavaScript without relying on the Select Class

Hover over elements to reveal D3.js tool tips

Meteor is not recognizing the defaultValue property in React

Implementing a controller's method within a jQuery/ajax URL in Rails: A step-by-step guide

Encountering a problem with the routing/asset pipeline that is causing an undefined

I am encountering an issue with identifying a directory in Node.js

Experiencing an overwhelming number of re-renders due to a specialized React Hook

utilize the functionality of chartjs to overlay images on top of pie chart segments

Image Slider's Functionality Hindered by AJAX

Setting up a node application on Heroku by organizing the client and server components into distinct directories

Utilize AJAX to dynamically refresh the page without having to reload it, enabling the use of both POST and GET methods

Storing JSON data in a SQL database