Laravel7 多次元配列をbladeで表示させる手順

Laravel7 多次元配列をbladeで表示させる手順

Laravel7でコントロール側で作成した多次元配列をbladeで表示させる方法を記述してます。

環境

  • OS windows10 pro 64bit
  • Composer 1.10.5
  • PHP 7.4.5
  • Laravel Framework 7.6.2

コントローラー側

コントローラー側で多次元配列を用意してます。

ここではHttp\Controllers配下に「SampleController」という名前で作成してます。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SampleController extends Controller
{
    public function index() {

        $array = [
            ['id' => '1', 'name' => 'mebee'],
            ['id' => '2', 'name' => 'info'],
            ['id' => '3', 'name' => 'web']
        ];

        return view('sample')->with('arrays',$array);

    }
}

ビュー作成

blade側を作成します。

resources\views内で「sample.blade.php」を下記の内容で作成します。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <!-- bootstrap -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        
    </head>
    <body class="vh-100 d-flex justify-content-center text-center">
        <div class="w-75 mt-5">
            <div class="text-black-50 text-center mt-5">
                <h1>多次元配列 表示</h1>
            </div>
            <table class="table mt-5">                            
                <tbody>
                @foreach($arrays as $array)
                <tr>
                    <td>{{ $array['id'] }}</td>                                
                    <td>{{ $array['name'] }}</td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </body>
</html>

ルーティング追加

ルーティングを設定するため、routes\web.phpに下記を追加します。

Route::get('import/read', 'ImportController@read');

実行

実行して確認してみます。

php artisan serve --host 0.0.0.0

ブラウザから http://プライベートIP:8000/sampleにアクセスすると多次元配列がblade側で表示されていることが確認できます。