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

[Faizan278243197lsr]

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]]}

[sdsinc_pmascari]

When you say you are "unable to do so", what does that mean?  It would be helpful if you explained what is happening such as an error message or incorrect data insertion, etc...

What I think I'm seeing is your AJAX is returning a serialized ColdFusion Query.  Is that correct?  In that case, the 'DATA' element is a 2-dimensional array.  However, in your code, it appear the 'each()' function is operating on only the 1st dimension. 

Perhaps something like this EACH loop will point you in the right direction?

$.each (data[0], function(k, v){

vx='<option value="'+v[0]+'">'+v[1]+'</option>';
});

[Faizan278243197lsr]

I followed your way also getting error. Providing you browser's screenshot. Therefore no changes happening at selecting 1st listbox data.