Laravel 8 using group by in view/blade by foreach

Question

I have this code in my controller :

public function videoGallery()
{
    $videoLinksRecord = VideoLinks::all()->sortBy('video_category_id')->groupBy('video_catetgory_id');

    return view('video.gallery')->with('videoLinksRecord', $videoLinksRecord);
}

which return this query:

{
    "1": [
        {"id":1,"video_category_id":1,"name":"Laszlo - Supernova","link":"PKfxmFU3lWY","description":"one loud banger!","home_video":null,"created_at":"2020-12-31T14:12:13.000000Z","updated_at":"2020-12-31T14:12:13.000000Z","deleted_at":null},
        {"id":2,"video_category_id":1,"name":"Subtact - Restart","link":"M5A46A2txC4","description":"one loud banger!","home_video":null,"created_at":"2020-12-31T14:12:13.000000Z","updated_at":"2020-12-31T14:12:13.000000Z","deleted_at":null},
        {"id":3,"video_category_id":1,"name":"Sushi Killer & Kevin Villeco - Anime Bae","link":"YHHjfYxLyuA","description":"one loud banger!","home_video":null,"created_at":"2020-12-31T14:12:13.000000Z","updated_at":"2020-12-31T14:12:13.000000Z","deleted_at":null},
        {"id":4,"video_category_id":1,"name":"Hyper Potions & Subtact - Adventures","link":"TKZUhs9Gcdo","description":"one loud banger!","home_video":null,"created_at":"2020-12-31T14:12:13.000000Z","updated_at":"2020-12-31T14:12:53.000000Z","deleted_at":null}
    ],
    "2": [
        {"id":5,"video_category_id":2,"name":"Laszlo - Supernova","link":"PKfxmFU3lWY","description":"one loud banger!","home_video":null,"created_at":"2020-12-31T14:12:13.000000Z","updated_at":"2020-12-31T14:12:13.000000Z","deleted_at":null},
        {"id":6,"video_category_id":2,"name":"Subtact - Restart","link":"M5A46A2txC4","description":"one loud banger!","home_video":null,"created_at":"2020-12-31T14:12:13.000000Z","updated_at":"2020-12-31T14:12:13.000000Z","deleted_at":null},
        {"id":7,"video_category_id":2,"name":"Sushi Killer & Kevin Villeco - Anime Bae","link":"YHHjfYxLyuA","description":"one loud banger!","home_video":null,"created_at":"2020-12-31T14:12:13.000000Z","updated_at":"2020-12-31T14:12:13.000000Z","deleted_at":null}
    ]
}

I want to display the result grouped by its video category similar to this blade :

{{-- name of the category --}}
<h2 class="poppins-medium text-lg text-darkergreen text-center">Video Category Name Here</h2>
<div class="container-fluid">
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4 borderline-darkergreen-md"></div>
        <div class="col-4"></div>
    </div>
</div>
{{-- loop for each result sharing the same "video_category_id" --}}
<div class="container-fluid">
    <div class="row d-flex justify-content-center px-0">
        <div class="col col-lg-2 d-none d-lg-block d-xl-none"></div>
        <div class="col col-xl-2 d-none d-xl-block"></div>
        {{-- video --}}
        <div class="col-12 col-md-6 col-lg-4 container-fluid d-flex justify-content-center spacer-md">
            <div class="row d-flex justify-content-center">
                <div class="col-12 d-flex justify-content-center container-fluid px-0">
                    {{-- video border --}}
                    <div class="video-box-border position-relative spacer-md">

                        <a href="">
                            {{-- video card image --}}
                            <div class="video-image position-absolute"></div>
                            {{-- video card background --}}
                            <div class="video-card"></div>
                        </a>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-2 px-0"></div>
                        <div class="col-8 borderline-darkergreen-sm px-0"></div>
                        <div class="col-2 px-0"></div>
                    </div>
                </div>
                {{-- video name--}}
                <p class="poppins-normal text-md text-gray text-center">Video Name Here
                </p>
            </div>
        </div>
    </div>
</div>

How should I use the $videoLinksRecord in a foreach logic to display it by its groupBy logic? This is my first time grouping query result so I do not know how to construct the logic for the said desired result.

Edit the code below is the relationship code in the model :

VideoLinks Model:

public function categories()
    {
        return $this->hasMany(VideoCategories::class);
    }

VideoCategories Model:

public function links()
    {
        return $this->belongsTo(VideoLinks::class);
    }

Answer 1

@foreach ($videoLinksRecords as $video_category_id => $videoLinks)
    {{ $video_category_id }}
    @foreach ($videoLinks as $videoLink)
        {{ $videoLink->id }}
        {{ $videoLink->video_category_id }}
        {{ $videoLink->name }}
        {{ $videoLink->link }}
        {{ $videoLink->description }}
        {{ $videoLink->home_video }}
        {{ $videoLink->created_at }}
        {{ $videoLink->updated_at }}
        {{ $videoLink->deleted_at }}
    @endforeach
@endforeach

Your relationship between the VideoLinks and VideoCategory models should be as follows

# VideoLinks model

public function category()
{
    // 2nd parameter is optional if you follow the naming conventions
    return $this->belongsTo(VideoCategory::class, 'video_category_id');
}

In your query eager load the relationship using with('category') but then group by the category's name and finally replace all() with get().

$videoLinksRecord = VideoLinks::with('category')->get()->sortBy('video_category_id')->groupBy('category.name');

@foreach ($videoLinksRecords as $category_name => $videoLinks)
    {{ $category_name }}
    @foreach ($videoLinks as $videoLink)
    ...