Populate select2 with JSON after init doesnt work

Question

I'm trying to populate a select2 element with a JSON array; but I can't get it.

I have the next array:

data = [{"id":"Foo","text":"Foo"},{"id":"Bar","text":"Bar"}]

And I initialize select2 as follow:

$("#selectElement").select2();

I use the next code to populate:

$('#selectElement').select2('data', data, true);

But doesnt work and I dont know why. Someone can help me?

EDIT: I need to populate after the init of select2 (I receive JSON from AJAX)

My intention is populate the select2 of my question with the JSON of the AJAX search of other select2.

All works well except the populate (I get this JSON well in the formatSelectiom method of the first but i dont know that can i do to populate the second select2 with this)

Answer 1

I see some differences between your code and the one from select2

Your data:

var data = [{"id":"Foo","text":"Foo"},{"id":"Bar","text":"Bar"}];

Should be:

var data = [{id:"Foo", text:"Foo"},{id:"Bar", text:"Bar"}]

Your population code:

$('#selectElement').select2('data', data, true);

Should be:

$('#selectElement').select2({data: data});

Example from Select2

var data = [
      { id: 0, text: 'enhancement' }, 
      { id: 1, text: 'bug' }, 
      { id: 2, text: 'duplicate' }, 
      { id: 3, text: 'invalid' }, 
      { id: 4, text: 'wontfix' }
];

$(".js-example-data-array").select2({
  data: data
});

<select class="js-example-data-array"></select>

Answer 2

I just posted a similar question to the select2 list and then went back to beating my head against the wall. This is what I came up with: (the "destroy" was the tip that helped). First I empty the select and then reset it.

    $("#id_category").on('change', function(){
           var cat = $(this).val();
           var url = '/breeds/lookup/?q='+cat;
           $.get(url, function(d){
               var idb = $("#id_breed").empty();
               idb.select2({data: d});
           }, "json");

        });

Answer 3

    $('#selectElement').select2({
                minimumInputLength: 1,
                ajax: {
                    url: '@Url.Action("Search", "Home")',
                    dataType: 'json',
                    data: function(params) {
                return {
                    ad: params.term
                };
            },
            processResults: function(data) {
                return {
                    results: $.map(data, function(obj) {
                        return { id: obj.Id, text: obj.Ad + " " + obj.Soyad };
                    })
                };
            }
            });

Answer 4

If you are trying to show drop-down with pre-loaded JSON by default, so the moment you click on field you expect drop-down with populated data to show up, without typing in a single letter, Set:

minimumInputLength: 0

and works like a charm. I hope that solved your issue because it did mine :)