LaravelでAJAXによる非同期処理でInternal Server Errorが出てしまう

LaravelでAJAXによる非同期処理を追加したいのですが、エラーが出力されてしまい、解消できずにおります。
アドバイスお願いします。

前提・実現したいこと

LaravelでAJAX通信を実装したいです。
画面上にはチェックボックスの付いたアイテムリストと１つのボタンがあり、アイテムにチェックしてボタンをクリックするとチェックされていたアイテムが削除されるという挙動を非同期で実現したいです。

アイテムを選択してボタンをクリックすると、以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

chromeのデベロッパーツールのコンソール

net::ERR_INCOMPLETE_CHUNKED_ENCODING 500 (Internal Server Error)

該当のソースコード

layout.blade.php

php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta name="csrf-token" content="{{ csrf_token() }}"> //トークンの情報
7  <title>@yield('title')</title>
8  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
9  <link rel="stylesheet" href="{{ asset('/css/common.css') }}">
10</head>
11<body>
12<div class="container">
13  @yield('content')
14</div>
15<script src="{{ asset('/js/checkbox.js') }}"></script>
16<script src="{{ asset('/js/buybtn_ajax.js') }}"></script>
17</body>
18</html>

list.blade.php

php
1@extends('../common/layout')
2
3@section('title', 'Item list')
4
5@section('content')
6    <ul>
7    @foreach($items as $item)
8      <li class="item-list" data-item-id = "{{ $item->id }}">
9        <input type="checkbox" class="buy_check" name="deleteItems[]" value="{{ $item->id }}">
10        <div>
11          <p>{{ $item->item_name }}</p>
12        </div>
13      </li>
14    @endforeach
15    </ul>
16    <div id="buyBtn">
17      <input type="submit" value="buy" id="buyBtn">
18    </div>
19@endsection

buybtn_ajax.js

js
1'use strict';
2
3const buyButton = document.getElementById('buyBtn');
4const itemLists = document.querySelectorAll('.item-list');
5
6
7buyButton.addEventListener('click', ()=>{
8  let formData = new FormData();
9  let deleteItemIds = [];
10  
11  //ボタンをクリックするとチェックが入っているアイテムのidがformDataに入る
12  itemLists.forEach(item => {
13    if(item.firstElementChild.checked){
14      formData.append('deleteItemIds[]', item.dataset.itemId);
15    };
16  });
17    
18  const xhr = new XMLHttpRequest();
19  
20  xhr.addEventListener("load",function(e){
21    if (this.readyState === 4) {
22      if (this.status === 200){
23        itemLists.forEach(item => {
24          deleteItemIds.forEach(deleteItemId => {
25            if(item.dataset.itemId == deleteItemId){
26              item.remove();
27            };
28          });
29        });
30      };
31    };
32  });
33
34  //トークン情報を取得
35  const token = document.getElementsByName('csrf-token').item(0).content;
36  
37  xhr.open('POST', '/item/delete');
38
39  //トークン情報をヘッダーに追加
40  xhr.setRequestHeader('X-CSRF-TOKEN', token);
41  
42  xhr.send(formData);
43})

web.php

php
1<?php
2
3use Illuminate\Support\Facades\Route;
4
5Route::post('/item/delete', 'ItemController@delete');

itemController.php

php
1<?php
2
3namespace App\Http\Controllers;
4
5use Illuminate\Http\Request;
6use App\Http\Controllers\Controller;
7use App\Item;
8
9class ItemController extends Controller
10{
11    public function delete(Request $deleteItemIds)
12    {
13        foreach($deleteItemIds as $deleteItem)
14        {
15            // AJAXで渡されたデータをModel経由で削除する処理をかく
16            $item = Item::findOrFail($deleteItem);
17            $item->delete();
18        }
19    }
20}
21

試したこと

試しに一度、deleteアクションの中身をver_dump('hello!!');のみにしてみたところ、エラー表示はなくchromeのデベロッパーツールのネットワークタブのResponseにもstring(7) "hello!!"と表示されたので、コントローラーまでは行き着いていると思っています。
また、deleteアクションの中身をvar_dump($deleteItems);にしてみたところ、以下のエラーがchromeのデベロッパーツールのコンソールに表示されました。

net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)

ですので、formDataの受け渡し周辺でコードに誤りがあるものと推測しています。

補足情報（FW/ツールのバージョンなど）

nginx/1.19.0
php-fpm/7.4.6
Laravel/7.14.1

EC2上にdockerで開発環境を構築しています。

yuki84web

2020/06/17 01:14

サーバー側で500エラーになっている原因（エラーメッセージ）が出ていると思うので、開発者コンソールのネットワークタブで該当の通信の応答（レスポンス）を確認してみて下さい。

T.Takeda

2020/06/17 01:34

ありがとうございます。ネットワークタブのResponseを開いてみると"Failed to load response data"と表示されています。（質問に画像を追加しました。）また、当該通信のStatus欄に以下の文言が出ています。 "(failed)net::ERR_INCOMPLETE_CHUNKED_ENCODING" こちらが500エラーの原因となっているメッセージなのでしょうか。よろしくお願いします。

meshi_s

2020/06/17 01:37

500であれば、laravel側のログを見るといいのではないでしょうか。また、「$deleteItems」をログ出力して確認するのも手かと思います。

yuki84web

2020/06/17 02:21

そのエラーはLaravelのものではないです。理由は色々あるらしいのですが、原因を断言出来ないので、エラー分で調べて下さい。 https://qiita.com/_Keitaro_/items/6a3342735d3429175300 を参考にFormDataの中を確認してください。Laravel側で受け取った値の処理の仕方（変数の参照方法）が違う気がします…

T.Takeda

2020/06/17 03:43

ありがとうございます。 deleteアクション内で\Log::info($deleteItems);としてみたところ、laravel.logに以下の文言が出ました。 local.ERROR: Object of class Symfony\Component\HttpFoundation\ParameterBag could not be converted to string {"exception":"[object] (Error(code: 0): Object of class Symfony\\Component\\HttpFoundation\\ParameterBag could not be converted to string at /var/www/vendor/laravel/framework/src/Illuminate/Database/Connection.php:582) アドバイス頂いた記事を参考にもう少し調べてみたいと思います。

yuki84web

2020/06/17 04:14 編集

Log::debug でも無理でしょうか？（本当はデバッガを使うのが早くて楽なのですが）

T.Takeda

2020/06/17 04:59

ありがとうございます。 formDataでの値が正しく配列になっていなかったので、そちらも修正の上、Log::debugをしてみたところ、以下の様に出ました。 [2020-06-17 04:52:08] local.DEBUG: array ( 'deleteItemIds' => array ( 0 => '1', 1 => '2', ), ) 正しく配列がdeleteアクションに渡されたと思い、改めてdeleteItemIds'でforEachを実施してみたのですが、ログには相変わらず以下のエラーが出力されています。 local.ERROR: Object of class Symfony\Component\HttpFoundation\ParameterBag could not be converted to string {"exception":"[object] (Error(code: 0): Object of class Symfony\\Component\\HttpFoundation\\ParameterBag could not be converted to string at /var/www/vendor/laravel/framework/src/Illuminate/Database/Connection.php:582)

行動規範の内容に同意します

回答1件

ベストアンサー

'deleteItemIds'というキーの中に配列があるのなら

php
1foreach ( $deleteItemIds['deleteItemIds'] as $deleteItemId ) {
2}

レコード削除もループで繰り返すのでなく
where条件指定して1回で済ませた方がスマートかなと思いました。

投稿2020/06/17 05:06

yuki84web

総合スコア1857

T.Takeda

2020/06/17 05:23

ありがとうございます。無事、チェックされたものアイテムのみがデータベースから削除されていることが確認できました！ただ、画面が更新されないという別の課題が出てきたので、調べてみたいと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！