Angular - Only push to array if unique

Question

I have an Angular application that collects values of items for an invoice, I want to make sure only unique items are being added to this collection but am having no luck.

I am pushing 3 pieces of information to this collection: id, price, and type. I want to make sure there is nothing in the collection currently matching those 3 points.

// My container
$scope.invoice = {
    items: [{
    }]
}


    $scope.addPhoto = function() {
    console.log('Withdrawing Photo: '+ $scope.item.id);
    if ($scope.invoice.items.indexOf(item.id) != $scope.item.id)
    {
      $scope.invoice.items.push({
        id: $scope.item.id,
        price: $scope.item.price,
        type: 'photo'
    });
    }
}

// Trying to avoid collections like this

invoice: { items: [ { } , { id: 25 price: 0 type: photo } , { id: 25 price: 0 type: photo } ] }

enter image description here

SomeKittens · Accepted Answer · 2014-03-28 17:43:59Z

8

.filter is pretty much what you need.

$scope.addPhoto = function() {
    console.log('Withdrawing Photo: '+ $scope.item.id);
    var matches = $scope.invoice.items.filter(function(datum) {
      return datum.id === $scope.item.id &&
        datum.price === $scope.item.price &&
        datum.type === $scope.item.type;
    });
    if (!matches.length)
    {
      $scope.invoice.items.push({
        id: $scope.item.id,
        price: $scope.item.price,
        type: 'photo'
    });
    }
}

Semi-contrived JSFiddle

edited Mar 28, 2014 at 17:43

answered Mar 28, 2014 at 17:24

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

xXPhenom22Xx Over a year ago

Hmmmm it is still letting me add the same item twice (see above) for collection

SomeKittens Over a year ago

@xXPhenom22Xx There was a typo in my answer, see edit and JSFiddle.

xXPhenom22Xx Over a year ago

Its still letting me add the same record over and over again... :/

SomeKittens Over a year ago

@xXPhenom22Xx My answer works for the use case you've put up (as demonstrated in the fiddle). I don't see how I can help further.

xXPhenom22Xx Over a year ago

I must be missing something because that Fiddle will not run for me, and when I use that snippet I can add the same item repeatedly

|

xXPhenom22Xx · Accepted Answer · 2014-03-29 13:16:45Z

This is the solution I came up with to solve my problem, hopefully it helps someone else.

    $scope.addPhoto = function () {
    console.log('Withdrawing Photo: ' + $scope.item.id);
    var newItemId = $scope.item.id;
    var newItemPrice = $scope.item.price;
    var newItemType = 'photo';
    var matches = true;


    // Make sure user hasnt already added this item
    angular.forEach($scope.invoice.items, function(item) {
        if (newItemId === item.id && newItemPrice === item.price && newItemType === item.type) {
            matches = false;
            $scope.message = 'You have already selected to withdraw this item!';
        }
    });

    // add item to collection
    if (matches != false) {
        $scope.invoice.items.push({
            id: $scope.item.id,
            price: $scope.item.price,
            type: 'photo'
        });
        $scope.total += $scope.item.price;
        $scope.message = 'Total Amount Selected';
    }
};

Taran · Accepted Answer · 2016-05-20 22:45:29Z

1

YOu can simple pop opposite of push

array.splice(array.pop(item));

answered May 20, 2016 at 22:45

Taran

3,24130 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular - Only push to array if unique

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related