Populate Select2 von JSON Ajax Antwort

Question

Ich versuche, ein select2 Eingabefeld von einer PHP/MySQL-Abfrage mit Ajax zu füllen.

Hier ist mein Code:

var groups_array = []; 

    $.getJSON('ajax_get_json.php?what=contact_groups', function (data) { 

     $.each(data, function (index) { 
      groups_array.push({ 
       id: data[index].value, 
       text: data[index].text 
      }); 
     }); 

    }); 

$("#contact_groups_select").val(groups_array); 

contact_groups_select ist die ID meines select2 Eingang.

Meine JSON Ajax Antwort sieht wie folgt aus:

[{"value":"12","text":"Brodheadsville"}] 

Mein select2 allerdings nicht ist bevölkern. Ich hoffe, ich habe genug Code zur Verfügung gestellt, um Hilfe zu bekommen. Vielen Dank.

Answer 1

statt .val() verwenden, sollten Sie die select2 Methode

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

Answer 2

Das Problem werden ist, dass groups_array nicht bis der Rückruf von getJSON() Methode, die asynchron aufgefüllt wird.

Also, sollten Sie Ihren Code innerhalb der Callback-Funktion setzen:

var groups_array = []; 

$.getJSON('ajax_get_json.php?what=contact_groups', function (data) { 
    $.each(data, function (index) { 
     groups_array.push({ 
      id: data[index].value, 
      text: data[index].text 
     }); 
    }); 
    // Call val() or select2() method here 
    $("#contact_groups_select").val(groups_array); 
});