Find if an instance exists in an angular array?

Question

I'm creating a shopping cart page that adds info about a product to an array when a button is clicked. I want to be able to search the cart array, and if that product was already added, increase the quantity of it.

So I have something like this: $scope.cartItems = [];

$scope.updateCart = function(product) {
    var found = $filter('filter')($scope.cartItems, {title: product.title}, true);
    if (found.length) {
     //This is where i'm not sure what to do
    } else {
        $scope.addToCart(product);
    };
};

$scope.addToCart = function(product) {
    $scope.cartItems.push({
        title: product.title,
        image: product.image,
        thumb: product.thumb,
        price: product.price,
        id: product.id,
        quantity: 1
    });
};

});

you appear to already be doing the search... Why not just update the quantity inside the if statement? — user400654
– user400654, Commented Mar 25, 2015 at 14:37
Wouldn't it be better to do your filter based on product id rather than title? I'd assume it's far less likely for the id to be duplicated across products than the title. — user400654
– user400654, Commented Mar 25, 2015 at 14:38
Hi, I probably should have mentioned I'm fairly new to Angular coding and so I'm trying to understand the basics a bit more with this project. I am now using product.id to search the cartItems array. Trying it the second way (without underscore), I'm not sure what the .map() function does, and what should go in the .indexOf(titleYouLookFor)? — Patrick Lines-Mattei
– Patrick Lines-Mattei, Commented Mar 25, 2015 at 16:05
Just got it working, thanks. I had to change titleYouLookFor to product.id, and fix an error on my html page. — Patrick Lines-Mattei
– Patrick Lines-Mattei, Commented Mar 25, 2015 at 17:11

Or Guz · Accepted Answer · 2015-03-25 15:05:03Z

I suggest when working with Arrays\Collections consider working with lodash\underscore, two great modules that will make your life easier.

I think finding an item by title is not unique enough (consider using ID) but it is your choice, this is how you can implement it easily with underscore (another option without underscore below).

Defining underscore:

var underscore = angular.module('underscore', []);
    underscore.factory('_', function() {
        return window._; // assumes underscore has already been loaded on the page
    });  

// Declare it as a dependency of your module
var app = angular.module('app', ['underscore']);

// And then inject it where you need it
app.controller('Ctrl', function($scope, _) {
});

Controller:

$scope.updateCart = function(product) {
   var index = _.findIndex($scope.cartItems, {title: product.title});
    if (index != -1) {
        $scope.cartItems[index].quantity++;
    } else {
        $scope.addToCart(product);
    };
};

$scope.addToCart = function(product) {
    $scope.cartItems.push({
        title: product.title,
        image: product.image,
        thumb: product.thumb,
        price: product.price,
        id: product.id,
        quantity: 1
    });
};
});

Without underscore it can be done like this:

var index= $scope.cartItems.map(function(x) {return x.title; }).indexOf(titleYouLookFor);

 if (index != -1) {
            $scope.cartItems[index].quantity++;
        } else {
            $scope.addToCart(product);
        };

Collectives™ on Stack Overflow

Find if an instance exists in an angular array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related