SweetAlert dropdown динамически добавляет элементы в список

Question

В настоящее время я использую sweetalert2 для захвата ввода пользователем из диалогового окна. Я хотел бы использовать раскрывающийся список в диалоговом окне очереди цепочек, но я не могу найти способ динамически добавлять элементы в раскрывающемся списке. Предположим, я хочу получить данные из формата JSON и поместить их в раскрывающийся список, есть ли способ сделать это?

function userInput() { 
    swal.setDefaults(
     { 
      showLoaderOnConfirm: true, 
      confirmButtonText: 'Next →', 
      showCancelButton: true, 
      animation: true, 
      progressSteps: ['1', '2', '3'] 
     } 
    ); 

    var steps = [ 
     { 
      text: 'Select an author to analyze the commit', 
      input: 'select', 
      inputOptions: { 
       'SRB': 'Serbia',  // How do I dynamically set value? 
       'UKR': 'Ukraine', 
       'HRV': 'Croatia' 
      } 
     }, 
     { 
      text: 'Select multiple authors to compare their commits', 
      input: 'select', 
      inputOptions: { 
       'SRB': 'Serbia',  // How do I dynamically set value? 
       'UKR': 'Ukraine', 
       'HRV': 'Croatia' 
      } 
     }, 
     { 
      text: 'Select a file directory to analyze all author\'s commit', 
      input: 'select', 
      inputOptions: { 
       'SRB': 'Serbia',  // How do I dynamically set value? 
       'UKR': 'Ukraine', 
       'HRV': 'Croatia' 
      } 
     } 
    ]; 

    swal.queue(steps).then(function(result) { 
     swal.resetDefaults(); 
     swal({ 
      type: 'success', 
      title: 'Success', 
      text: 'Scroll down for statistics!', 
      html: 
       'Your selections: <pre>' + 
       JSON.stringify(result) + 
       '</pre>', 
      confirmButtonText: 'Ok', 
      showCancelButton: false 
     }) 
    }, function() { 
     swal.resetDefaults() 
    }) 
} 

Получение данных в формате JSON:

function getData(repolink) { 
readDataFromGit('https://api.github.com/repos/' + repolink + '/git/trees/master?recursive=1', function(text){ 
     data = JSON.parse(text); 
     $.each(data, function(i, v) { 
      // Retrieve v.login data! 
      data = v.login; 
     }) 
    }); 
} 

function readDataFromGit(link, callback) { 
    var request = new XMLHttpRequest(); 
    request.overrideMimeType("application/json"); 
    request.open('GET', link, true); 
    request.onreadystatechange = function() { 
     if (request.readyState === 4 && request.status == "200") { 
      callback(request.responseText); 
     } 
    }; 
    request.send(null); 
} 

Answer 1

SweetAlert2 documentation Как говорит inputOptions параметр может быть object или Promise.

Для заполнения выбирать элементы динамически, вы должны использовать обещание, вот простой пример:

var inputOptionsPromise = new Promise(function (resolve) { 
 
    // get your data and pass it to resolve() 
 
    setTimeout(function() { 
 
    resolve({ 
 
     '#FF0000': 'Red', 
 
     '#00FF00': 'Green', 
 
     '#0000FF': 'Blue' 
 
    }) 
 
    }, 2000) 
 
}) 
 

 
swal({ 
 
    input: 'select', 
 
    inputOptions: inputOptionsPromise 
 
})

<script src="https://unpkg.com/sweetalert2@7.7.0/dist/sweetalert2.all.js"></script>

Обратите внимание, что SweetAlert2 автоматически покажет загрузчик, пока Promise для inputOptions параметра не будет решен или отклонено.