Laravel 11 delete item with Bootstrap 5 modal - response is string, not object

web.php:

Route::delete('/roles/{id}/delete', [RoleController::class, 'delete'])->name('roles.delete');

RoleController.php:

public function delete($id): string
    {
        $data = [
        'id' => $id
    ];

    return response()->json($data, 200);
}

index.blade.php:

<a href="{{ route('roles.delete', $role->id) }}" class="btn btn-danger btn-xs btn-action" data-bs-toggle="tooltip" data-bs-custom-class="ls-tooltip" title="{{ __('Delete') }}" data-action-message="{{ __('Delete this role?') }}"><i class="fas fa-trash"></i></a>

<div class="modal fade" id="confirm_action">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h1 class="modal-title fs-5 text-white">{{ __('Please confirm') }}</h1>
            </div>
            <div class="modal-body">
                <div class="modal-message"></div>

                <div class="mt-1 d-flex justify-content-end">
                    <form id="form_delete" method="post">
                        @csrf
                        @method('DELETE')

                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-danger ms-2">{{ __('Delete') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

app.js:

const confirm_action = document.getElementById('confirm_action');
const btn_action = document.querySelectorAll('.btn-action');

if (typeof(confirm_action) != 'undefined' && confirm_action != null) {
    const modal = new bootstrap.Modal(confirm_action);
    const form = document.getElementById('form_delete');

    let url, id, message;

    confirm_action.addEventListener('show.bs.modal', event => {
        const confirm_text = confirm_action.querySelector('.modal-message');
        confirm_text.textContent = message;
    });

    form.addEventListener('submit', event => {
        event.preventDefault();console.log(url);

        axios.delete(url, {
            data: {
                id: id,
            },
        }).then(response => {
            if (response.status === 200) {
                let data = response.data;
                console.log(data);
            }
        }).catch(error => {
            console.log(error);
        });
    });

    btn_action.forEach(btn => {
        btn.addEventListener('click', event => {
            event.preventDefault();
            url = btn.getAttribute('href');
            id = btn.getAttribute('data-role-id');
            message = btn.getAttribute('data-action-message');
            modal.show();
        });
    });
}

I get the following response as a string:

HTTP/1.0 200 OK
Cache-Control: no-cache, private
Content-Type:  application/json
Date:          Sat, 23 Nov 2024 07:07:09 GMT
{"id":"7"}

But how do I get the data 'id'?

Your problem is your method:

public function delete($id): string
    //                         ^ this
    {
        $data = [
        'id' => $id
    ];

    return response()->json($data, 200);
}

The return type of the method is string, and according to the php documentation, php will coerce types to the type expected; in this case, string.

Normally Laravel uses the Illuminate\Http\Response type. I don't know enough about Laravel internals to describe why it, or Symfony, needs that specific type of object to correctly output the response as you want it.

The fix in this case is to of course remove the type coercion from the method, or set it to the correct value.