Ajax api request return code 500 in laravel apiresource-CodePudding

i trying to make api request using ajax on laravel but it keep give me code 500 error i already test the url link that generated from ajax url on browser and it's work fine but when it using ajax function it will keep return code 500.

this is my js

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

document.getElementById("infoEmpty").style.display = 'none';
document.getElementById("infoError").style.display = 'none';

$.ajax({
    url: "/api/prospec-survey",
    data: {"change_code":"A", "change_state_code":2, "change_active_state":1},
    method: 'GET',
    dataType: "text json",
    type: 'GET',
    success: function(data){
        $("table tbody").html('')
        data.forEach(function(item, index){
            $("table tbody").append(
                `<tr>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.survey_nomor}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.survey_date}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.contract_id}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.contract_nama}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.class_code}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.user_name}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.route_desc}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.locatioin_komplek}</td>
                    <td style="border-right: 1px solid gray; text-align: center;">${item.pp_name}</td>
                    <td style="text-align: center;"><a href="/customer-care/new-connection/survey-new-customers/print-survey-order/{${item.survey_nomor}}" ><i ></i></a></td>
                </tr>`
            )
        })
        document.getElementById("table").style.display = 'block';
    },
    error:function(rr){
        document.getElementById("infoError").style.display = 'block';
        document.getElementById("infoEmpty").style.display = 'none';
        document.getElementById("table").style.display = 'none';
    }
});

and the api routes

Route::apiResource('prospec-survey', ProspectiveCustomersSurveyController::class);

and it give me error like this

jquery.min.js:4 GET http://127.0.0.1:8001/api/prospec-survey?change_code=A&change_state_code=2&change_active_state=1 500 (Internal Server Error)

but if i using the url from ajax on browser directly it returning the data as expected like below

Illuminate\Pagination\LengthAwarePaginator {#1823 ▼
#items: Illuminate\Support\Collection {#1805 ▶}
#perPage: 10
#currentPage: 1
#path: "http://127.0.0.1:8001/api/prospec-survey"
#query: []
#fragment: null
#pageName: "page"
 onEachSide: 3
#options: array:2 [▶]
#total: 54
#lastPage: 6
}

any idea how to fix it? any suggestion may be help really

CodePudding user response：

okay after some fast review i found that the error come from the api controller it self that make the response not returning as json but diedump and make the ajax request blocked by diedump function

$data = $this->Survey($request, $select_data, $custom_where);
dd($data) // -> this blocked the response
return response()->json($data);

and another error is from the ajax loop where the data it self was pagination where the loops can't access the actual data, so i change the jquery from this

     data.forEach(function(item, index){ // <- cannot access the paginate data
        $("table tbody").append(
            `<tr>
                <td style="border-right: 1px solid gray; text-align: center;">${item.survey_nomor}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.survey_date}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.contract_id}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.contract_nama}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.class_code}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.user_name}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.route_desc}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.locatioin_komplek}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.pp_name}</td>
                <td style="text-align: center;"><a href="/customer-care/new-connection/survey-new-customers/print-survey-order/{${item.survey_nomor}}" ><i ></i></a></td>
            </tr>`
        )
    })

tho this

     data.data.forEach(function(item, index){ // <- adding 1 level data so it can access the paginate value
        $("table tbody").append(
            `<tr>
                <td style="border-right: 1px solid gray; text-align: center;">${item.survey_nomor}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.survey_date}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.contract_id}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.contract_nama}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.class_code}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.user_name}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.route_desc}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.locatioin_komplek}</td>
                <td style="border-right: 1px solid gray; text-align: center;">${item.pp_name}</td>
                <td style="text-align: center;"><a href="/customer-care/new-connection/survey-new-customers/print-survey-order/{${item.survey_nomor}}" ><i ></i></a></td>
            </tr>`
        )
    })