Select2 AJAX with JSON

Question

I have been trying to populate my input with select2 using the JSON provided. Here's the JSON:

{
"airports": 
[
    {
        "id": "1",
        "code": "AMQ",
        "city": "Ambon",
        "country": "Indonesia"
    },
    {
        "id": "2",
        "code": "BJW",
        "city": "Bajawa",
        "country": "Indonesia"
    }
]
}

And the html code:

<input class="" type='hidden' value="192" data-init-text='Departing City' name='input' id='depart-airport' style="width: 300px"/>

And the js code:

    $(document).ready(function() {
  $('#depart-airport').select2({
    minimumInputLength: 1,
    ajax: {
      url: "http://localhost:4000/api/airports.json",
      dataType: 'json',
      results: function (data) {
        return { results: data};
      }
    }
  });
});

There's no error in console, but whether I try to input them it's always saying that "searching failed" or there's not even anything. The data from json never showed. Do you have anything to fix this around? Thanks's before :)

Answer 1

You have a minor error in your jQuery:

 $(document).ready(function() {
    $('#depart-airport').select2({
        minimumInputLength: 1,
        ajax: {
            url: "http://localhost:4000/api/airports.json",
            dataType: 'json',
            results: function (data) {
                // You had { results: data }, but your actual information is in data.airports
                return { results: data.airports }; 
            }
        }
    });
});