Vistas parciales para colecciones con la directiva @each de Blade de Laravel

Cuando utilizamos Laravel trabajamos con colecciones, las cuales generalmente debemos listar en alguna parte de nuestro sistema. Para ello Blade nos brinda la directiva @each que nos ayuda a realizar esta tarea de una manera fácil y sencilla.

A modo de ejemplo vamos a crear un pequeño módulo de productos con el cual mostraremos un listado. Para ello debemos crear el modelo Product, además aprovecho de pasar el parámetro --migration para que genere también la migración, ejecutamos en consola el siguiente comando:

php artisan make:model Product --migration

Ahora, modificamos nuestra migración, para agregar un campo name y otro description.

Schema::create('products', function (Blueprint $table) {
      $table->increments('id');
      $table->string('name');
      $table->mediumText('description');
      $table->timestamps();
});

Adicionalmente vamos crear nuestro seeder para la tabla de Productos. Como dije antes, la idea es tener datos para mostrar en el ejemplo. Ejecutamos en consola el siguiente comando:

php artisan make:seed ProductsTableSeeder

Definimos un model factory para poder generar nuestro datos ficticios. Esto se debe de hacer en el database/factories/ModelFactory.php, de la siguiente forma:

$factory->define(App\Product::class, function (Faker\Generator $faker) {

    return [
        'name' => $faker->word,
        'description' => $faker->paragraph
    ];
});

Para conocer cómo trabajar con Model Factory visita el tutorial: Model factories en Laravel 5.1

Ahora si, modificamos nuestro seeder ProductsTableSeeder, para generar 20 items, quedaría de la siguiente forma:

public function run()
{
    factory(\App\Product::class,20)->create();
}

No olvides hacer el llamado al nuevo seeder en el archivo database/seeds/DatabaseSeeder.php, dentro de la función run, de la siguiente forma:

 public function run()
 {
      $this->call(ProductsTableSeeder::class);
 }

Perfecto, ya podemos ejecutar ejecutar la migración con el seeder. Vamos a ejecutar en consola el siguiente comando:

php artisan migrate --seed

Recuerda configurar tu conexión de base de datos en el archivo .env antes de ejecutar el comando.

Vamos a crear un controlador para hacer el listado de productos. Generamos el controlador con el siguiente comando en consola:

php artisan make:controller ProductsController

En el archivo routes/web.php colocamos la siguiente ruta:

Route::get('/products', 'ProductsController@index');

Ya tenemos la ruta que apunta a la función index del controlador, vamos a crear esa función donde simplemente traiga los productos (paginados, por cuestiones de estética) y retorne una vista con los productos:

public function index()
{
    $products = Product::paginate(5);
        
    return view('products.list',compact('products'));
}

Bien, ahora vamos crear nuestras vistas, antes que todo para tener todo el código organizado crearemos un layout.blade.php dentro de la carpeta resources/views/.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Listado de productos</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>

<div class="container">

    @yield('content')

</div>
</body>
</html>

Seguidamente, podemos crear nuestra vista para listar los productos y aquí es donde podemos usar la directiva @each de Blade:

@extends('layout')

@section('content')

    <table class="table">
        <th>Nombre</th>
        <th>Descripcion</th>

        @each('products.partials.items', $products, 'product')

    </table>

    {{$products->links()}}
@endsection

La directiva @each recibe como primer parámetro la vista que se va a repetir con la información de los productos, como segundo parámetro la colección a iterar, en este caso los productos, como tercer parámetro el nombre cómo será llamado el item de la colección en cada iteración.

@each puede recibir un cuarto parámetro que es opcional, sería el nombre de otra vista, la cual se mostraría si no existe ninguna data. En nuestro ejemplo que no exista ningún producto en la colección.

El uso de la directiva @each es lo mismo que usáramos la directiva @foreach de esta manera:

@extends('layout')

@section('content')

    <table class="table">
        <th>Nombre</th>
        <th>Descripcion</th>

        @foreach ($products as $product)
            @include('products.partials.items', ['product' => $product])
        @endforeach

    </table>

    {{$products->links()}}
@endsection

Continuando, debemos crear la vista items, dentro de la carpeta resources/views/products/partials, la cual quedaría así:

<tr>
    <td>{{$product->name}}</td>
    <td>{{$product->description}}</td>
</tr>

Excelente, listo ahora podemos dirigirnos a la ruta nombre_de_tu_proyecto.app/products y obtendrás como resultado una vista más limpia, sin utilizar un @foreach y con la opción de colocar otra vista de no existir datos.

Espero que te haya gustado y sea de gran ayuda para tus futuros proyectos. Recuerda compartir éste y demás tutoriales en tus redes sociales. Dudas y/o comentarios son bien recibidos. Además, anímate a formar parte de nuestra comunidad, así podrás disfrutar de todo nuestro material premium.