Home > Enterprise >  Limit the html element when looping in Laravel blade
Limit the html element when looping in Laravel blade

Time:10-09

I have a table that display the data by @foreach loop of Laravel. The loop is limited up to 3. But i want the icon inside table is limited up to 2 only. Here's the interface when served:

enter image description here

The blade:

<table class="table">
    <thead>
        <tr>
            <th>Nama Peserta</th>
            <th>Diklat</th>
            <th>Kabupaten/Kota</th>
            <th>Nilai</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($data->take(3) as $obj)
        <tr>
            <td>
            <div class="d-flex align-items-center">
                {!! $medals !!}
                <div>
                    <span>{{$obj->user->name}}</span>
                </div>
            </div>
            </td>
            <td>{{$obj->diklat->name}}</td>
            <td>{{$obj->user->regency->name}}</td>
            <td>
                <div class="avatar bg-light-success mr-2">
                <div class="avatar-content">
                    <span>98</span>
                </div>
                </div>
            </td>
        </tr>
    @endforeach
    </tbody>
</table>

That {!! medals !!} is the element that i want to limit to. I create it through Controller. Like this:

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\{Diklat, User, UserDiklat, Regency};
use Illuminate\Support\Facades\DB;

class DashboardController extends Controller
{
    public function index()
    {

        $data = UserDiklat::with('diklat', 'user')->where('is_approve', 1)->get();

        $medals = '<div class="avatar bg-light-warning mr-2">
                    <div class="avatar-content">
                        <i data-feather="award" class="font-medium-3"></i>
                    </div>
                </div>';

        return view('admin.index', compact('data', 'medals'));
    }
}

So, how to limit $medals icon inside the table to display only 2 while the data in table display up to 3? I've been search for this issue but still didn't find it as well. I hope you would to help me guys. Thank you in advance.

CodePudding user response:

Try this one. I have updated your code slightly.

<table class="table">
    <thead>
        <tr>
            <th>Nama Peserta</th>
            <th>Diklat</th>
            <th>Kabupaten/Kota</th>
            <th>Nilai</th>
        </tr>
    </thead>
    <tbody>
    <?php $print_medal = 0; ?>
@foreach ($data->take(3) as $obj)
        <tr>
            <td>
            <div class="d-flex align-items-center">
                @if ($print_medal < 2) {!! $medals !!} @endif
                <div>
                    <span>{{$obj->user->name}}</span>
                </div>
            </div>
            </td>
            <td>{{$obj->diklat->name}}</td>
            <td>{{$obj->user->regency->name}}</td>
            <td>
                <div class="avatar bg-light-success mr-2">
                <div class="avatar-content">
                    <span>98</span>
                </div>
                </div>
            </td>
        </tr>
    <?php $print_medal  ; ?>
@endforeach
    </tbody>
</table>
  • Related