Dynamically create divs in Laravel blade using foreach

Question

I have an object returned from controller to the blade using compact. In my blade file I am using this to print the values

<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"> <!-- This must regenerate to print next 4 entries-->
    <ul class="list_teachers">
        @php
            $length=count((array)$facility_details);
        @endphp
        @foreach($facility_details as  $key=>$value)
        @if(($key!='id')&&($key!='college_id')&&($key!='updated_at')&&($key!='created_at')&&($value!=0))
            <li class="col-lg-3 col-md-3 col-sm-3">
                <a>
                <figure><img src="{{asset('assets/img/'.$key.'.png')}}" alt=""></figure>
                    <p>{{$key}}</p></a>
            </li>
        @endif
        @endforeach                                 
    </ul>
</div>

This code is working fine, but what I want to achieve is when four iterations of @foreach($facility_details as $key=>$value) happens, the loop should break to create another <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"> ie a whole new <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"> should be generated and foreach should begin with count of 4 to print next four entries.

Answer 1

You can do this in some ways:

1-Use array_chunk

https://www.php.net/manual/en/function.array-chunk.php

@foreach(array_chunk($facility_details, 4) as $chunk)
    <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
        <ul class="list_teachers">

            @foreach($chunk as $key=>$value)
            @if(($key!='id')&&($key!='college_id')&&($key!='updated_at')&&($key!='created_at')&&($value!=0))
            <li class="col-lg-3 col-md-3 col-sm-3">
                <a>
                <figure><img src="{{asset('assets/img/'.$key.'.png')}}" alt=""></figure>
                    <p>{{$key}}</p></a>
            </li>
            @endif
            @endforeach 

        </ul>
    </div>
@endforeach

Note: if $facility_details is a collection you could do $facility_details->chunk(4) instead of array_chunk($facility_details, 4)

2- Use the $loop variable

@foreach($facility_details as $key => $value)
    @if ($loop->iteration % 4 == 0)
    <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
        <ul class="list_teachers">
    @endif

        @if(($key!='id')&&($key!='college_id')&&($key!='updated_at')&&($key!='created_at')&&($value!=0))
        <li class="col-lg-3 col-md-3 col-sm-3">
            <a>
            <figure><img src="{{asset('assets/img/'.$key.'.png')}}" alt=""></figure>
                <p>{{$key}}</p></a>
        </li>
        @endif

    @if ($loop->iteration % 4 == 0)   
        </ul>
    </div>
    @endif
@endforeach

Answer 2

I think this is what you're trying to achieve

               @foreach($facility_details as $key => $value)
                            @if (($loop->index % 4 == 0)||($loop->index == 0))
                                <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
                                <ul class="list_teachers">
                            @endif
                                @if(($key!='id')&&($key!='college_id')&&($key!='updated_at')&&($key!='created_at')&&($value!=0))
                                <li>
                                    <a>
                                        <figure><img src="{{asset('assets/img/'.$key.'.png')}}" alt=""></figure>
                                        <p>{{$key}}</p>
                                   </a>
                                 </li>
                                @endif
                              @if (($loop->index % 4 == 3)&&($loop->index > 0))   
                            </ul>
                        </div>
                  @endif
                @endforeach

This loop shows four entries inside outer <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"> and then closes the </div> , Re-creates it and the process goes on.