Работа с объектами JSON

Question

Я пытаюсь написать расширение chrome, которое даст мне ID видео Youtube из 3 лучших результатов введенной строки, но столкнулся с проблемой. Мой код: -

var items = []; 

function getVideo(searchQuery,item){ 
    searchQuery = searchQuery.replace(/ /g,'+'); 
    var queryURL = 'https://www.googleapis.com/youtube/v3/search?q='+searchQuery+'&key=AIzaSyDq5SqWuQIEfIx7ZlQyKcQycF24D8mW798&part=snippet&maxResults=3&type=video'; 
    //console.log(queryURL); 
    $.getJSON(queryURL,function(data){ 
     items = data.items; 
     /*for(var i in items){ 
      console.log((items[i].id.videoId).toString()); 
     }*/ 
    }); 
} 

document.addEventListener('DOMContentLoaded',function(){ 
    var button = document.getElementById('search'); 
    var div = document.getElementById('results'); 
    button.addEventListener('click',function(){ 
     var base_url = 'https://www.youtube.com/watch?v='; 
     var url = []; 
     var input = document.getElementById('input'); 
     var result = input.value; 
     getVideo(result); 
     for(var i in items){ 
      console.log(items[i].id.videoId.toString()); 
      //$('<p>'+(items[i].id.videoId.toString())+'</p><br>').appendTo('#results'); 
      //url.push(base_url+items[i].id.videoId.toString()); 
     } 
     /*for(var j in url){ 
      console.log("test"); 
      console.log(url[j]); 
      $('<p>'+url[j]+'</p><br>').appendTo('#results'); 
     }*/ 
    }); 
}); 

Теперь, когда я пытаюсь использовать его в текущем состоянии, на выходе не выводится. Но, когда я делаю небольшие изменения, все работает нормально.

var items = []; 

function getVideo(searchQuery,item){ 
    searchQuery = searchQuery.replace(/ /g,'+'); 
    var queryURL = 'https://www.googleapis.com/youtube/v3/search?q='+searchQuery+'&key=AIzaSyDq5SqWuQIEfIx7ZlQyKcQycF24D8mW798&part=snippet&maxResults=3&type=video'; 
    //console.log(queryURL); 
    $.getJSON(queryURL,function(data){ 
     items = data.items; 
     for(var i in items){ 
      console.log((items[i].id.videoId).toString()); 
     } 
    }); 
} 

document.addEventListener('DOMContentLoaded',function(){ 
    var button = document.getElementById('search'); 
    var div = document.getElementById('results'); 
    button.addEventListener('click',function(){ 
     var base_url = 'https://www.youtube.com/watch?v='; 
     var url = []; 
     var input = document.getElementById('input'); 
     var result = input.value; 
     getVideo(result); 
     /*for(var i in items){ 
      console.log(items[i].id.videoId.toString()); 
      //$('<p>'+(items[i].id.videoId.toString())+'</p><br>').appendTo('#results'); 
      //url.push(base_url+items[i].id.videoId.toString()); 
     }*/ 
     /*for(var j in url){ 
      console.log("test"); 
      console.log(url[j]); 
      $('<p>'+url[j]+'</p><br>').appendTo('#results'); 
     }*/ 
    }); 
}); 

Я в основном положил console.log в функцию getVideo. Но элементы - глобальная переменная, поэтому область не должна быть проблемой. Что здесь происходит?

Answer 1

getVideo является асинхронным, поэтому ваш массив элементов еще не заполнен в первом примере.

Answer 2

Звонок на номер $.getJSON() не является синхронным, поэтому, когда вы выполняете вызов, попробуйте немедленно пропустить его через массив items, массив еще не был заполнен из-за асинхронного вызова.

Поэтому, когда вы вводите ведение журнала консоли в блоке возврата $.getSON, это работает, потому что вызов вернулся с данными.

Если вы хотите, чтобы звонок для ваших данных JSON был синхронным, используйте вместо этого вызов ajax.

Ответ для этого: "Is it possible to set async:false to $.getJSON call"