Laravel: Add to favourites button is duplicating because of foreach loop-CodePudding

For a project, I've created a method where people can add products they want to buy to a wishlist. All items in the catalog are stored and each article has a hearticon that is clickable. Once it's clicked, it's added to my database. However, when an article is added to favourites, the icon turns red but the original transparant icon is still there. So articles whom are added to favourites all have a filled and a transparant icon, which is not how it should be done. Here is my code:

My View:

                <div > 
                    @foreach ($articles as $article)
                        <div >
                            <form action="{{route('wishlist.store', $article->id)}}" id="wish_form" method="post">
                                {{csrf_field()}}
                                <input name="user_id" type="hidden" value="{{Auth::user()->id}}" />
                                <input name="article_id" type="hidden" value="{{$article->id}}" />
                                <button type="submit" ><img src="{{ 'icons/0heart.png' }}" alt="" width="25" onclick="this.form.submit()" id="emptyHeart"></button>
                                @foreach ($wishlists as $wishlist)
                                    @if ($wishlist->article_id === $article->id )
                                        <button type="submit"><img src="{{ 'icons/1heart.png' }}" alt="" width="25" onclick="this.form.submit()" id="checked"></button>
                                    @endif
                                @endforeach
                              </form>
                            <div >
                                {{-- <img src="{{$article->image}}" alt="" > --}}
                            </div>
                                <div >
                                    <h4 ><strong>{{ $article->title }}</strong></h4>
                                </div>
                                <div >   
                                    <p >{{$article->prijs}}</p> 
                                    <p>Beschikbaar via {{$article->website->title}}</p>
                                </div> 
                        </div>   
                    @endforeach
                </div>

My controller:

class FilterController extends Controller
{

    public function catalogus(Request $r)
    {
        $articles = Article::all();
        $categories = Category::all();
        $websites = Website::all();
        $wishlists = Wishlist::all()->where('user_id',auth()->user()->id);
        $list = Wishlist::all()->where('article_id', $articles->id);
        dd($list);
        return view('catalogus', compact('articles', 'categories', 'websites', 'wishlists', 'list'));
    }

}

My model:

class Wishlist extends Model
{
    protected $table = "wishlists";

    protected $fillable = [
        'user_id',
        'article_id',
        'confirmed',
        'available'
    ];

    protected $casts = [
    ];

    public function user()
    {

        return $this->belongsTo(User::class);
        
    }

    public function article()
    {

        return $this->belongsTo(Article::class);
    
    }

CodePudding user response：

You can use contains() collection method

<form action="{{route('wishlist.store', $article->id)}}" id="wish_form" method="post">
    {{csrf_field()}}
    <input name="user_id" type="hidden" value="{{Auth::user()->id}}"/>
    <input name="article_id" type="hidden" value="{{$article->id}}"/>

    @if ($wishlists->contains('article_id', $article->id))
        <button type="submit">
            <img src="{{ 'icons/1heart.png' }}" alt="" width="25"
                 onclick="this.form.submit()" id="checked">
        </button>
    @else
        <button type="submit" >
            <img src="{{ 'icons/0heart.png' }}" alt="" width="25"
                 onclick="this.form.submit()" id="emptyHeart" />
        </button>
    @endif
</form>