配列を用意

Controller

$data = [
  [
    'name' => 'Wada',
    'sex' => 'Male',
    'age' => 35,
  ],
  [
    'name' => 'Sugiyama',
    'sex' => 'Male',
    'age' => 20,
  ],
  [
    'name' => 'Fukui',
    'sex' => 'Female',
    'age' => 49,
  ]
];

return view('index', [
    'data' => $data,
]);

今回は説明するために手動で配列を用意しています。データベースなどがある場合はそれを変数に代入して使います。

変数の中身を確認

Controller

return viewの直前に以下を記述します。

echo('<pre>');
var_dump($data);
echo('</pre>');

くわしくは↓

bonoponz.hatenablog.com

return viewしたページを表示すると、ページの上部に$dataの中身が摘出されます。

array(3) {
  [0]=>　// ★
  array(3) {
    ["name"]=>　// ☆
    string(4) "Wada"
    ["sex"]=>
    string(4) "Male"
    ["age"]=>
    int(35)
  }
  [1]=>　// ★
  array(3) {
    ["name"]=>
    string(8) "Sugiyama"
    ["sex"]=>
    string(4) "Male"
    ["age"]=>
    int(20)
  }
  [2]=>　// ★
  array(3) {
    ["name"]=>
    string(5) "Fukui"
    ["sex"]=>
    string(6) "Female"
    ["age"]=>
    int(49)
  }
}

★のカッコ内にある数字が今回のインデックス番号になります。

厳密にいうと、☆にあたる['name']もインデックス番号を持っていますが、詳しくは割愛します。

テーブルで利用

テーブルの通し番号としてインデックス番号を使用することができます。

データベースによっては、そもそも通し番号や管理番号がある場合はそちらを利用すると便利です。

Blade

<h2>個人情報</h2>
<table class="table">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">name</th>
      <th scope="col">sex</th>
      <th scope="col">age</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($data as $key => $value)
      <tr>
        <td>{{ $key+1 }}</td>
        <td>{{ $value['name'] }}</td>
        <td>{{ $value['sex'] }}</td>
        <td>{{ $value['age'] }}</td>
      </tr>
    @endforeach
  </tbody>
</table>

プラス1する

インデックス番号は先頭の番号が 0 です。

通し番号として使いたい場合、先頭のカラムは「1」が適切ですよね。そのため、取得したインデックス番号に+1をします。

{{ $key }}　// 結果：0
{{ $key+1 }}　// 結果：1

通し番号をインデックス番号で代用できました！

f:id:bonoponz:20200828222800p:plain

連動したidとして利用する

モーダルやコラプスなど、行やセルなどと同じIDにすることで連動させることができる要素ってありますよね。

foreachで回した場合、一意なIDにするためにインデックス番号を使います。

Blade

<h2>個人情報</h2>
<table class="table">
  <thead>
    <tr>
      <th scope="col">name</th>
      <th scope="col">sex</th>
      <th scope="col">age</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    @foreach ($data as $key => $value)
      <tr>
        <td>{{ $value['name'] }}</td>
        <td>{{ $value['sex'] }}</td>
        <td>{{ $value['age'] }}</td>
        <td>
          <a href="#" data-toggle="modal" data-target="#exampleModal{{$key}}">　// ★
            詳細
          </a>
        </td>
      </tr>

      <div class="modal fade" id="exampleModal{{$key}}" tabindex="-1" aria-labelledby="exampleModalLabel">　// ★
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>{{ $value['name'] }}さんは{{ $value['age'] }}歳だ</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>

    @endforeach
  </tbody>
</table>