页面加载时未定义的ajax响应

Question

I have a script, below, and when the page loads I get an error message: Cannot read property 'length' of undefined , so I researched the error and found that the AJAX request wasn't executed. If I execute the same code in the browser console, the script works fine. What's wrong with my code?

<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

Since JavaScript is asynchronous language, it just keeps running and doesn't wait for AJAX to return result.

In your code, the first line of getCitiesList2 function assigns the return value of an AJAX call. The AJAX returns later , and var bla doesn't yet have the response. To solve this, you can pass a callback to your AJAX function getCitiesList and execute it on AJAX success.

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

The problem is that console.log(bla['responseJSON']); in getCitiesList2 is executed before the ajax response is received. And after var bla = getCitiesList(); assignment, bla basically holds a deferred object . All you need to do is to assign a callback function that is going to be executed once the ajax call returns.

<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

first and second answer doesn't help, the same problem.

This work:

<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>