Empty dropdowns populated

I’m having an issue where I’m attempting to populate my Select2 dropdown from an array returned from an API which is populating the correct number of rows, but the entries are blank. Anything I’m doing wrong here?

Here is the array I want to populate the dropdown from:

var vehicleDropDownData = [
{
"id":"676",
"name":"Ford F150"
},
{
"id":"684",
"name":"Dodge Ram"
},
{
"id":"683",
"name":"Mercedes 240D"
},
{
"id":"682",
"name":"Toyota Corolla"
}
]

I have code to populate the Dropdown from the array as follows

$('.vehiclePicker').select2({
    data: vehicleDropDownData
 })

And here’s what the HTML element looks like for the dropdown:

  <select class="vehiclePicker" name="vehicles[]" multiple="multiple"></select>

The “name” property should be called “text”.

1 Like

Easy fix, thanks for this! :smiley: