Неопределенный ответ ajax при загрузке страницы

Question

У меня есть сценарий ниже, а при загрузке страницы появляется сообщение об ошибке: Cannot read property 'length' of undefined, поэтому я исследовал ошибку и обнаружил, что запрос AJAX не был выполнен. Если я выполняю тот же код в консоли браузера, скрипт работает нормально. Что случилось с моим кодом?

<script> 

function getCitiesList() { 
    var country_id = '189'; 
    return $.ajax({ 
    type: 'get',//тип запроса: get,post либо head 
    url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
    }); 
} 

function getCitiesList2() { 
    var bla = getCitiesList(); 
    console.log(bla['responseJSON']); 
    var i = 0; 
    var data = []; 
    while (i < bla['responseJSON'].length) { 
    data[i] = {}; 
    data[i]['id'] = bla['responseJSON'][i]['id']; 
    data[i]['text'] = bla['responseJSON'][i]['title']; 
    i++; 
    } 
    console.log(data); 
} 


$('#city').select2({ 
    data: getCitiesList2(), 
    width: "100%" 
}); 

</script> 

Answer 1

Поскольку JavaScript асинхронный язык, он просто продолжает работать и не ждать, пока AJAX для возврата результата.

В вашем коде первая строка функции getCitiesList2 назначает возвращаемое значение вызова AJAX. AJAX возвращает позже и var bla еще не получил ответ. Чтобы решить эту проблему, вы можете передать обратный вызов своей функции AJAX getCitiesList и выполнить ее на AJAX.

function getCitiesList(callback) { 
    var country_id = '189'; 
    $.ajax({ 
    type: 'get',//тип запроса: get,post либо head 
    url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
    success: function(result) { 
     callback(result); 
    } 
    }); 
} 

function getCitiesList2() { 
    getCitiesList(function(result) { 
    var i = 0; 
    var data = []; 
    while (i < result['responseJSON'].length) { 
     data[i] = {}; 
     data[i]['id'] = result['responseJSON'][i]['id']; 
     data[i]['text'] = result['responseJSON'][i]['title']; 
     i++; 
    } 
    }); 
} 

Answer 2

Проблема заключается в том, что console.log(bla['responseJSON']); в getCitiesList2 выполняется до того, как ответ будет получен Ajax. А после var bla = getCitiesList(); назначения bla в основном содержит deferred object. Все, что вам нужно сделать, это назначить функцию обратного вызова, которая будет выполняться после возврата вызова ajax.

<script> 

function getCitiesList() { 
    var country_id = '189'; 
    return $.ajax({ 
    type: 'get',//тип запроса: get,post либо head 
    url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
    }).done(function(data){   
    $('#city').select2({ 
     data: processCitiesResponse(data), 
     width: "100%" 
    }); 
    }); 
} 

function processCitiesResponse(data) 
{ 
    console.log(data); 
    var i = 0; 
    var options = []; 
    while (i < data.responseJSON.length) { 
     options[i] = {}; 
     options[i].id = data.responseJSON[i].id; 
     options[i].text = data.responseJSON[i].title; 
     i++; 
    } 
    console.log(options); 
} 


</script> 

Answer 3

первый и второй ответ не помогает, та же проблема.

Эта работа:

<script> 
           var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content'); 
           function Blabla(){ 
           var country_id = '189'; 
           $.ajax({ 
            type: 'get', 
            url: '/countries/' + country_id + '/cities' + "&authenticity_token=" + AUTH_TOKEN, 
            success: function(bla){ 
            var i = 0; 
            var data = []; 
            while (i < bla.length) { 
             data[i] = {}; 
             data[i]['id'] = bla[i]['id']; 
             data[i]['text'] = bla[i]['title']; 
             i++; 
            } 
            $('#city').select2({ 
             data: data, 
             width: "100%" 
            }); 
            } 
           }); 
           } 
           Blabla(); 
          </script>