Trying to avoid pushing duplicates into array Angular

Question

I have a Laravel 5.1 and Angular app.

I am returning a collection of objects to Angular from my Laravel controller. I am then trying to push new objects onto that scope variable but want to avoid pushing a duplicate.

The returned collection looks like this;

$scope.albums = [
{"id": 1,
 "name": "Pork Soda",
 "band": "Primus"}
{"id": 2,
 "name": "Fly by Night",
 "band": "Rush"}
{"id": 3,
 "name": "Freaky Styley",
 "band": "RHCP"}
]

I then present an ng-repeat of another collection;

$scope.availableAlbums = [
{"id": 1,
 "name": "Pork Soda",
 "band": "Primus"}
{"id": 2,
 "name": "Fly by Night",
 "band": "Rush"}
{"id": 3,
 "name": "Freaky Styley",
 "band": "RHCP"}
{"id": 4,
 "name": "Zenyatta Mondatta",
 "band": "The Police"}
{"id": 5,
 "name": "2112",
 "band": "Rush"}
{"id": 6,
 "name": "Truth and Soul",
 "band": "Fishbone"}
]

Now I have a function that allows the user to add a $scope.availableAlbums to the $scope.albums. The issue is, I do not want to be able to allow for a duplicate album to be added. I am using a unique filter on the repeat which stops a duplicate from being displayed but it doesn't actually stop it from being added to the array.

I have tried an indexOf argument but can't seem to get it to stop the duplicate.

I am trying this right now to find the index of the pushed object and if found don't push;

$scope.addAlbum = function(album) {

    var id = {id: album.id};

    if (!(id in $scope.albums)){
        $scope.albums.push(album);
    }
 }

However, the above is not finding the id when it does exist in the array.

This seems like something that would pretty common place. What am I missing?

Thanks!

Ishwar Patil · Accepted Answer · 2016-07-29 13:36:16Z

1

If you are looking for other way and can use ES6, use this inside your function:

if(!$scope.albums.some(e => e.id == album.id))
   $scope.albums.push(album);

If not ES6, use the regular javascript syntax for function instead of =>

answered Jul 29, 2016 at 13:36

Ishwar Patil

1,7363 gold badges12 silver badges20 bronze badges

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

Comments

Vanojx1 · Accepted Answer · 2016-07-29 13:35:16Z

For each new album filter availableAlbums and check the result length, if >= 1 dont add else add

var app = angular.module("test", [])
  .controller("testCtrl", function($scope) {
    $scope.availableAlbums = [{
      "id": 1,
      "name": "Pork Soda",
      "band": "Primus"
    }, {
      "id": 2,
      "name": "Fly by Night",
      "band": "Rush"
    }, {
      "id": 3,
      "name": "Freaky Styley",
      "band": "RHCP"
    }, {
      "id": 4,
      "name": "Zenyatta Mondatta",
      "band": "The Police"
    }, {
      "id": 5,
      "name": "2112",
      "band": "Rush"
    }, {
      "id": 6,
      "name": "Truth and Soul",
      "band": "Fishbone"
    }]

    $scope.albums = [{
      "id": 1,
      "name": "Pork Soda",
      "band": "Primus"
    }, {
      "id": 2,
      "name": "Fly by Night",
      "band": "Rush"
    }, {
      "id": 3,
      "name": "Freaky Styley",
      "band": "RHCP"
    }, {
      "id": 4,
      "name": "Freaky Styley A New album name for test",
      "band": "RHCP"
    }, {
      "id": 5,
      "name": "Freaky Styley",
      "band": "RHCP A new Band"
    }]

    angular.forEach($scope.albums, function(currentAlbum) {
      var duplicates = $scope.availableAlbums.filter(function(el) {
        return el.name == currentAlbum.name && el.band == currentAlbum.band;
      }).length
      if (!duplicates) {
        console.log("PUSH ---->", duplicates);
        currentAlbum.id = $scope.availableAlbums.length+1
        $scope.availableAlbums.push(currentAlbum);
      } else {
        console.log("DONT PUSH ---->", duplicates);
      }
    });
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <ul>
    <li ng-repeat="album in availableAlbums">{{album.id}} - {{album.name}} - {{album.band}}</li>
  </ul>
</div>

Thanks Vanojx, this solution made the most sense to me in my limited capacity! Thanks to all for replies. I have ported your solutions to this plunker - plnkr.co/edit/YpgS3INWBLNiT3IAqh1C?p=preview to show how I implemented.

Mars Robertson · Accepted Answer · 2016-07-29 13:08:40Z

0

Current code (not working):

$scope.addAlbum = function(album) {

    var id = {id: album.id};

    if (!(id in $scope.albums)){
        $scope.albums.push(album);
    }
 }

It creates a new object id and the comparison fails.

I think the easiest way is to create a temporary array of IDs and then compare id that is a primitive type (not an object).

answered Jul 29, 2016 at 13:08

Mars Robertson

13.3k13 gold badges73 silver badges93 bronze badges

Collectives™ on Stack Overflow

Trying to avoid pushing duplicates into array Angular

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related