angular JS adding and removing movie to a array of favorites - angularjs

Question

I'm quite new to angular js and I am having a hard time trying to implement a function who adds a movie to an array of favorites and removes it from the array in case it's already there (difficult part).
Those are my controllers bellow. The SearchController and DetailsController refer to the search.html and details.html respectively, also bellow. Can I get any help?
Thanks in advance
var myControllers = angular.module("myControllers", []);
myControllers.controller(
"SearchController",
function MyController($scope, $http) {
$scope.searchByTitle = function (title) {
$http
.get("http://www.omdbapi.com/?apikey=d4458e16&s=" + title)
.then(function (data) {
$scope.movies = data.data.Search;
});
};
$scope.wishlist = JSON.parse(localStorage.getItem("wishlist"));
}
);
myControllers.controller(
"DetailsController",
function MyController($scope, $http, $routeParams) {
$http
.get("http://www.omdbapi.com/?apikey=d4458e16&i=" + $routeParams.itemId)
.then(function (data) {
$scope.movies = data.data;
});
$scope.favList = JSON.parse(localStorage.getItem("wishlist")) || [];
$scope.isFavorite = false; //JSON.parse(localStorage.getItem("isFavorite")) || false;
$scope.addMovieToFavList = function (item) {
/*if ($scope.favList.includes(item)) {
console.log("movie is on favorites and will be removed");
//$scope.favList.pop(item);
} else {
console.log("movie is not on favorites and will be added");
//$scope.favList.push(item);
}*/
!$scope.isFavorite ? $scope.favList.push(item) : $scope.favList.pop();
$scope.isFavorite = !$scope.isFavorite;
localStorage.setItem("wishlist", JSON.stringify($scope.favList));
//localStorage.setItem("isFavorite", JSON.stringify($scope.isFavorite));
};
}
);
search.html:
<div class="container-fluid">
<h1>Film App<h1>
<div class="row">
<h2>Search</h2>
<input
ng-model="title"
class="form-control"
placeholder="Search for a film"
value="Search"
/>
<button ng-click="searchByTitle(title)" class="btn btn-primary btn-block">
Search for a movie
</button>
<ul class="list-group">
<li ng-repeat="movie in movies | filter:title" class="list-group-item">
<a href="#!/details/{{movie.imdbID}}">
<img ng-src="{{movie.Poster}}" width="30px" />
{{movie.Title}}<span>, {{movie.Year}}</span>
</a>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<h1>My Favorites<h1>
<ul class="list-group">
<li ng-repeat="favouriteMovie in wishlist" class="list-group-item">
<a href="#!/details/{{favouriteMovie.imdbID}}">
<img ng-src="{{favouriteMovie.Poster}}" width="30px" />
{{favouriteMovie.Title}}<span>, {{favouriteMovie.Year}}</span>
</a>
</li>
</ul>
</div>
details.html:
<div class="container">
<div class="row">
<div class="col-12 mt-3">
<div class="card" ng-model="movies">
<div
class="card-header d-flex align-items-start justify-content-between"
>
<a href="#!">
<button>Back Home</button>
</a>
<button ng-click="addMovieToFavList(movies)">
{{isFavorite==false?'Add to favorites':'Remove from favorites'}}
</button>
<h1 class="card-title my-0">{{movies.Title}}</h1>
<img ng-src="{{movies.Poster}}" />
</div>
<div class="card-body">
<div class="card-text text-secondary">
<h4>Year</h4>
<p>{{movies.Year}}</p>
<h4>Cast</h4>
<p>{{movies.Actors}}</p>
<h4>Plot</h4>
<p>{{movies.Plot}}</p>
<h4>Rating</h4>
<p>{{movies.imdbRating}}/10</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You will want to check for the movie via an identifier (like an ID) not by comparing whole objects. So, assuming the object has a property called 'ID' we can check for that. Also, to remove an item from your array, you can use splice
$scope.addMovieToFavList = function(item) {
let index = $scope.favList.findIndex(movie => movie.ID == item.ID);
if (index === -1) {
// movie doesn't exist in favorites yet
$scope.favList.push(item)
$scope.isFavorite = true;
} else {
// movie exists, we will splice it out
$scope.favList.splice(index, 1)
$scope.isFavorite = false
}
localStorage.setItem("wishlist", JSON.stringify($scope.favList));
};