I tried this

$.ajax({
        url: '/api/serials/index/',
        method: 'GET',
        data: {
            reference_no: $(this).val()
        },
        success: function (response) {
            let items_repairs = response[items_repairs];
            let items_replaces = response[items_returns];
    
            $('#repair_serial_no').empty().append('<option></option>');
            let filteredResponse = response[0].filter(function(item) {
                //Check if the serial is already used in the repair and return table
                let usedInRepair = items_repairs.serial_no.indexOf(item.serial_no) !== -1;
                let usedInReplaces = items_replaces.serial_no.indexOf(item.serial_no) !== -1;
                if(!usedInRepair && !usedInReplaces) {
                    return item;
                }
            });
            filteredResponse.forEach(item => {
                let template = `<option value="${item.id}">${item.serial_no}</option>`;
                $('#return_serial_no').append(template);
            });

but when i click the click the select there is no serial showing

in my /api/serials/index/

public function index(Request $request)
    {
        $serials = SerialNumber::where('reference_no', $request->reference_no)->get(['id', 'serial_no']);
        $items_repairs = ItemsRepair::all();
        $items_returns = ItemsReturn::all();
        $items_replaces = ItemsReplace::all();
        return response()->json([$serials,$items_repairs,$items_returns,$items_replaces]);

CodePudding user response：

I think you forgot to set the key as a string.

$.ajax({
...
success: function (response) {
            let items_repairs = response['items_repairs'];
            let items_replaces = response['items_returns'];
...
}