I am using JSGRID to display records in my laravel blade view. I want to make one of the fields a dropdown selectible menu. So far I have achieved that using the following

$(document).ready(function() {

    var stations = [
        { Id : 1,  Name : "NAIROBI"},
        { Id : 2,  Name : "EMBU"},
        { Id : 14, Name : "MWEA"},
        { Id : 15, Name : "RUNYENJES"},
        { Id : 16, Name : "CHUKA"},
        { Id : 17, Name : "MATUU"},
        { Id : 18, Name : "MTWAPA"},
        { Id : 19, Name : "KARURUMO"},
        { Id : 20, Name : "KATHWANA"},
        { Id : 21, Name : "MERU"},
        { Id : 22, Name : "KIRITIRI"},
        { Id : 23, Name : "KIVAA"},
        { Id : 24, Name : "CHIAKARIGA"},
        { Id : 25, Name : "ISHIARA"},
        { Id : 26, Name : "MITUNGUU"},
        { Id : 27, Name : "TUNYAI"},
        { Id : 28, Name : "KIBUGU"},
        { Id : 29, Name : "NKUBU"},
        { Id : 30, Name : "kitui"},
        { Id : 31, Name : "SIAKAGO"},
        { Id : 32, Name : "MOMBASA"},
        { Id : 33, Name : "VOI"},
        { Id : 34, Name : "THIKA"},
        { Id : 35, Name : "EMBU STAGE"},
        { Id : 36, Name : "NAIROBI ERUSHA HSE"},
        { Id : 37, Name : "MWINGI"},
        { Id : 38, Name : "KYENI"},
        { Id : 39, Name : "KANYONYO"},
        { Id : 40, Name : "KABATI"},
        { Id : 41, Name : "KATHAGERI"},
        { Id : 42, Name : "KATHAGERU"},
        { Id : 43, Name : "NENO MWEA OFFICE2"},
        { Id : 44, Name : "kisasi"},
        { Id : 46, Name : "KAEWA"},
        { Id : 47, Name : "RUIRU"},
        { Id : 48, Name : "CHANGAMWE"}
    ];

    $("#jsGrid").jsGrid({

        width: "100%",
        height: "auto",

        loadIndication: true,
        loadMessage: "Please, wait...",
        loadShading: true,

        pageLoading: true,
        pageIndex: 1,
        pageSize: 20,

        inserting: false,
        editing: false,
        sorting: true,
        paging: true,
        filtering: true,
        autoload: true,

        rowClick: function(args) {
            var $row = this.rowByItem(args.item),
            selectedRow = $("#jsGrid").find('tr.highlight');

            // Remove highlight from any previously highlighted row
            if (selectedRow.length) {
                selectedRow.toggleClass('highlight');
            }

            // Highlight the clicked row
            $row.toggleClass("highlight");
        },

        controller: {
            loadData: function(filter) {
                return $.ajax({
                    type: "GET",
                    url: "{{ route('delivery.outgoing_delivery') }}",
                    data: filter,
                    dataType: "json",
                    success: function(response) {
                        var stations = response.stationArray
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("Error loading data:", textStatus, errorThrown); // Debugging line
                    }
                });
            }
        },

        fields: [
            {
                name: "rowIndex",
                title: "#",
                type: "number",
                width: 30,
                align: "center",
                filtering: false,
                itemTemplate: function(_, item) {
                    return $.inArray(item, $("#jsGrid").jsGrid("option", "data")) + 1;
                    }
            },
            { name: "DELIVERY", type: "text", width: 80, validate: "required" },
            {
                name: "DESTINATION",
                type: "select",
                items: stations,
                valueField: "Id",
                textField: "Name",
                filterTemplate: function() {
                    var $select = jsGrid.fields.select.prototype.filterTemplate.call(this);
                    $select.prepend($("<option>").prop("value", "0").text("(All)"));
                    return $select;
                }
            },

            { name: "PARCELS", type: "text", width: 60, validate: "required" },
            { name: "CREATED AT", type: "text", width: 100, validate: "required" },
            { name: "VERIFIED AT", type: "text", width: 100, validate: "required" },
            { name: "VEHICLE", type: "text", width: 70 },
            {
                name: "VERIFIED",
                type: "text",
                width: 50,
                filtering: false,
                validate: "required",
                itemTemplate: function(value) {
                    return value == 1 ? '<i style="color: green;font-size: 16px" class="ti ti-square-rounded-check"></i>' : '<i style="color: red;font-size: 16px" class="ti ti-xbox-x"></i>';
                }
            },
            {
                type: "control",
                filtering: false,
                itemTemplate: function(value, item) {
                    return $("<a>")
                        .attr({
                            href: "#",
                            'data-bs-toggle': 'modal',
                            'data-bs-target': '#modal-outgoing',
                            'data-id': item.DELIVERY
                        })
                        .addClass("ti ti-eye-down")
                        .css({
                            "font-size": "15px",
                            "text-decoration": "none"
                        })
                        .html('<span class="sr-only"></span>');
                }
            }

        ],
    });
});

I want the DESTINATION field to be selectible. I have partly achieved this functionality using logic from this dribble snippet
The issue I am now experiencing is that all the other columns in the table have there respectable data all except the DESTINATION field. The search input at the top has data that allows me to select locations as desired but the column itself has no data

I was wondering whether I have done something wrong or I am missing something

This is partial code from my laravel controller

// Execute the query with the bindings
        $query = DB::select($sql, $bindings);

        // Format data to match jsGrid requirements
        $output = [];
        foreach($query as $transaction){
            $output[] =
            [
                "DELIVERY" => $transaction->delivery_id,
                "DESTINATION" => $transaction->destination,
                "PARCELS" => $transaction->parcel_count,
                "CREATED AT" => $transaction->created_at,
                "VERIFIED AT" => $transaction->verified_at,
                "VEHICLE" => $transaction->delivery_vehicle,
                "VERIFIED" => $transaction->verified,
            ];
        };

        return response()->json([
            'data' => $output,
            'itemsCount' => $totalCount,
        ]);