Creating a playlist in javascript/angular (copying array by value but setting nested objects by reference)

Question

I'm trying to create a playlist for a music player in an angular app which will include a shuffle button. Now i have no problem with the actual shuffle function, i'm using the Fisher Yates Shuffle and it's working fine. When the shuffle button is clicked i call the shuffle function:

$scope.shuffle = function(){
    $scope.shufflePlaylist = angular.copy($scope.playlist);

    //// Then shuffle the array
    var i = $scope.shufflePlaylist.length, t, m;
    for(var i = $scope.shufflePlaylist.length - 1; i > 0; i--){

      m = Math.floor(Math.random() * i);
      t = $scope.shufflePlaylist[m];
      $scope.shufflePlaylist[m] = $scope.shufflePlaylist[i];
      $scope.shufflePlaylist[i] = t;
    }
  }

I create a new array containing the shuffled playlist because i still need the original playlist so that i can un-shuffle. I have to use angular.copy when setting the shuffled playlist because otherwise the original playlist gets shuffled as well (because the shuffled is just a reference to the original).

Herein lies my problem, because i'm copying my array by value and it's no longer connected to the original array in any way, any actions i do on the tracks (e.g. like/unlike) in 1 list doesn't occur in the other. So i want the 2 playlist to not be connected by reference but the individual objects inside each array should be connected by reference. Is this possible?

Here's a plunkr: http://plnkr.co/edit/a0wpSwatnDlNSBanK7HP?p=preview

score 2 · Accepted Answer · answered Apr 28 '16 at 11:31

2

angular.copy will create deep copy https://docs.angularjs.org/api/ng/function/angular.copy

try to use array slice to copy the array:

$scope.shufflePlaylist = $scope.playlist.slice()

answered Apr 28 '16 at 11:31

jcubic

61,973
54
229
402

Creating a playlist in javascript/angular (copying array by value but setting nested objects by reference)

1 Answers1