Заполнение массива циклом + Ajax

274

21 апреля 2017, 20:39

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<head> 
   
</head> 
 
<body> 
  <script> 
    ids = [1, 5, 20484011]; //список с айдишниками 
    names = []; //массив для записи имён 
 
    function print_name() { 
 
      $.each(ids, function(){ 
        $.ajax({ 
          url: 'https://api.vk.com/method/users.get?user_ids=' + this + '&v=5.63', //перебирая массив, получаем информацию о страницах, соответствующих указанному id 
          type: 'get', 
          dataType: 'jsonp', 
          success: function(result) { 
 
            names.push(result.response[0].last_name); //добавляем в массив фамилию 
 
          } 
        }); 
 
 
      }); 
      console.log(names); //выводим результат 
    } 
  </script> 
 
  <button onclick='print_name()'>Click</button> 
</body> 
 
</html>

В данном коде мы делаем несколько GET-запросов, результат которых записываем в список 'names'. Но проблема в том, что если после этого захотим просмотреть полученный результат, то выведет пустой массив и лишь при повторном вызове функции он заполнится. Как всё это дело можно поправить?

Answer 1

Дело в том, что вы пытались выводить результаты в консоль еще до того как получили ответ от сервера, так как методы ajax работают асинхронно они имеют callback-функции, вы используете функцию success которая срабатывает когда получен ответ от сервера, в ней же вам и необходимо выводить результат.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
  <script> 
    ids = [1, 5, 20484011]; //список с айдишниками 
    names = []; //массив для записи имён 
 
    function print_name() { 
      $.each(ids, function() { 
        $.ajax({ 
          url: 'https://api.vk.com/method/users.get?user_ids=' + this + '&v=5.63', //перебирая массив, получаем информацию о страницах, соответствующих указанному id 
          type: 'get', 
          dataType: 'jsonp', 
          success: function(result) { 
            names.push(result.response[0].last_name); //добавляем в массив фамилию 
            console.log(names); //выводим результат 
          } 
        }); 
      }); 
    } 
  </script> 
  <button onclick='print_name()'>Click</button> 
</body>