I am trying to display data using joins from the database based on the user id, but it does not return any data in my form. But when I die and dump, there is data returned from the database.

Controller

public function getUserDetails(Request $request)
{
    $user_id = $request->user_id;
    $userDetails = DB::table('users')
        ->join('roles', 'users.role', '=', 'roles.id')
        ->join('departments', 'users.user_department', '=', 'departments.id')
        ->where('users.id', $user_id)
        ->get(['users.*', 'roles.role_name', 'departments.dept_name']);

    return response()->json(['details' => $userDetails]);
}

View/Blade

$(document).on('click', '#editUserBtn', function () {
    var user_id = $(this).data('id');
    
    $('.editUserModal').find('form')[0].reset();
    $('.editUserModal').find('span.error-text').text('');
    $.post('<?= route("get.user.details") ?>', {user_id: user_id}, function (data) {
        $('.editUserModal').find('input[name="did"]').val(data.details.id);
        $('.editUserModal').find('input[name="name"]').val(data.details.name);
        $('.editUserModal').find('select[name="role"]').val(data.details.role);
        $('.editUserModal').find('select[name="user_department"]').val(data.details.user_department);
    }, 'json');
});

Route

Route::post('getUserDetails',  [SuperadminController::class,'getUserDetails'])
    ->name('get.user.details');

Here is my json response in browser:

{"details":
[{

    "id":57,"name":"jonya agencies","date_of_birth":"26-12-1980","gender":"Male","designation":"Chief Officer","mobile_no":"254733000000","email":"jonyaagencies@gmail.com","role":1,"user_department":12,"email_verified":1,"email_verified_at":"2022-02-27T13:18:23.000000Z","created_at":"2022-02-27T12:59:08.000000Z","updated_at":"2022-03-07T18:34:22.000000Z","role_name":"Admin","dept_name":"Information Security"

}]

}

the problem is reading the JSON array