Dealing with JSON objects

Question

I am trying to write a chrome extension which will give me the Youtube video IDs of the top 3 results of an entered string, but am facing a problem. My code :-

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');
        }*/
    });
});

Now, when I try using it in the current state , no output in console. But, when I make a small change, it works fine.

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');
        }*/
    });
});

I basically put the console.log within the function getVideo. But items is a global variable, so scope shouldn't be a problem. What is going on here?

Agreed with above. The issue is that you are calling console.log on items in the first on before items is defined. — user2263572, May 27 '16 at 15:17
`searchQuery.replace(/ /g,'+');` this is not correct url encoding, what if query has `&`? — Iłya Bursov, May 27 '16 at 15:18
Could you point out where the change is? I can't see the change — , May 27 '16 at 15:27
[There is no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/). — Felix Kling, May 27 '16 at 15:30

score 1 · Answer 1 · answered May 27 '16 at 15:17

1

getVideo is asynchronous, so your items array isn't populated yet in the first example.

answered May 27 '16 at 15:17

Lee

2,993
3
21
27

score 0 · Answer 2 · edited May 23 '17 at 12:07

The call to $.getJSON() is not synchronous, so when you make the call then try to immediately loop through the items array, the array has not yet been filled due to the call being asynchronously running.

That's why when you put the console logging within the return block of $.getSON it works because the call has returned with the data.

If you want to make the call for your JSON data synchronous, use an ajax call instead.

The answer for doing that is here: "Is it possible to set async:false to $.getJSON call"

Dealing with JSON objects

2 Answers2