Alternative for ajax async: false

Question

break property fires before ajax completed. Only solution I've found is to make "async: false". But it is deprecated. Is there any better option to wait until ajax completed without setting async to false?

$.getJSON(jsonUrl, function(data) {
  var type, json, options;

  var globalData = data;

  $.each(globalData.properties, function(key, value) {
    switch(value.type) {
      case 'string':
        type = '<input type="text">'
        break;
      case 'int':
        type = '<input type="number" min="0">'
        break;
      case 'decimal':
        type = '<input type="number" min="0" step="0.01">'
        break;
      case 'date':
        type = '<input type="date">'
        break;
      case 'boolean':
        type = '<input type="checkbox">'
        break;
      case 'json':
        json = './assets/json/' + value.json_name + '.json'

        $.ajax({
          async: false,
          url: json,
          success: function(data) {
            $.each(data, function(index, item) {
              options += '<option value=' + item.key + '>' + item.value + '</option>'
            })

            type = '<select id="issue-form"><option disabled selected value></option>' + options + '</select>';
          }
        });

        break;
    }


    listItem += '<li class="questionnaire_item">' + 
                  '<label>' + 
                    '<div class="question">' + 
                      value.description + ':' + 
                    '</div>' + 
                    '<div class="input">' + 
                      type + 
                    '</div>' + 
                  '</label>' +
                '</li>';

    type = '';
  })

  form.innerHTML += listItem;
  $('.content').append(form)});

Answer 1

The best way to fix this would be to put your break, or your action, in the success callback of your ajax request, beside that you could use a boolean set in a beforeSend callback of your ajax request and wait while your boolean is still false :

$.getJSON(jsonUrl, function(data) {
var type, json, options;

var globalData = data;

  $.each(globalData.properties, function(key, value) {
  var isBusy = false;
    switch(value.type) {
      case 'string':
        type = '<input type="text">'
        break;
      case 'int':
        type = '<input type="number" min="0">'
        break;
      case 'decimal':
        type = '<input type="number" min="0" step="0.01">'
        break;
      case 'date':
        type = '<input type="date">'
        break;
      case 'boolean':
        type = '<input type="checkbox">'
        break;
      case 'json':
        json = './assets/json/' + value.json_name + '.json'

        $.ajax({
          async: false,
          url: json,
          beforeSend: function(){
            isBusy = true;
          },    
          success: function(data) {
            isBusy = false;
            $.each(data, function(index, item) {
              options += '<option value=' + item.key + '>' + item.value + '</option>'
            })

            type = '<select id="issue-form"><option disabled selected value></option>' + options + '</select>';
          }
        });
            while(isBusy) {}
        break;
    }


listItem += '<li class="questionnaire_item">' + 
              '<label>' + 
                '<div class="question">' + 
                  value.description + ':' + 
                '</div>' + 
                '<div class="input">' + 
                  type + 
                '</div>' + 
              '</label>' +
            '</li>';

type = '';
  })

  form.innerHTML += listItem;
  $('.content').append(form)});

But once agains it breaks the whole point of having an AJAX request, you better just prepare your data before loading the page and then show it.

To be honest this solutions is not the best one, i would go with promise as Rory said in the comments.