jquery - Select2 Drop Down To Display Pre Fetched Data -

i have following code:

<hr class="col-sm-10"/> <form class="col-sm-10 form-horizontal">     <div class="form-group">         <label for="test" class="control-label col-sm-2">name</label>         <div class="col-sm-10">             <select class="col-sm-10 form-control" id="tenantlist">              </select>         </div>     </div> </form>  <script>     var tenants = [];         $.ajax({                 url: 'api/tenant'             })             .done(function (data) {                 tenants = data;             })             .fail(function () {                 console.log("problem :(");             });      $('#tenantlist').select2({         placeholder: "select tenant",         allowclear: true,         data: tenants     }); </script> 

tenants variable not being set returned json array. data coming server successfully, still variable empty. doing wrong? right way in select2 ?

move select2 instruction inside done ajax

<hr class="col-sm-10"/> <form class="col-sm-10 form-horizontal">     <div class="form-group">         <label for="test" class="control-label col-sm-2">name</label>         <div class="col-sm-10">             <select class="col-sm-10 form-control" id="tenantlist">              </select>         </div>     </div> </form>  <script>     var tenants = [];         $.ajax({                 url: 'api/tenant'             })             .done(function (data) {                 tenants = data;                 $('#tenantlist').select2({                   placeholder: "select tenant",                   allowclear: true,                   data: tenants                 });             })             .fail(function () {                 console.log("problem :(");             });   </script>