Facing issue while binding retrieved data through AJAX in select-list box

Hi experts,

I am facing issue while binding retrieved data through AJAX in select-list box. I am unable to do so. Please suggest where to do changes in my code.

This is my ajax code:

$('body').on('change','#port_code', function() { //1st list box on change this will execute to update records in 2nd list box. 
var selected_port = document.getElementById("port_code").value; //1st list box selected value
if (selected_port != "")
{
var formData = "selected_port_code="+selected_port+"&reload=true"; 
$.ajax({
url: 'index.cfm?action=vehicle.getGateNo',
type: 'POST',
data: formData,
success: function(data, textStatus, jqXHR){
console.log(data);
$.each (data, function(k, v){

vx='<option value="'+v.GATE_NO+'">'+v.GATE_DESC+'</option>';
});
$('#gate_no').html(vx); //2nd Select-List box where binding data
}

}); //AJAX End
}

}); //Function End

Getting record in console.log(data):

{"COLUMNS":["GATE_NO","GATE_DESC","ACTIVE","CREATED_BY","CREATED_DATE","MAIN_GATE","PORT_CODE","SR_NO"]

,"DATA":

[["1","MAIN GATE/OFFSHORE DIBBA","Y","ADMIN","December, 21 2022 00:00:00","Y","POD",1],["2","GATE 2","Y","ADMIN","March, 01 2023 10:20:30",null,"POD",5]]}