0

I'm having problems with using functions with YouTube API. it's saying that one of the variables is not defined and I'm not sure what's causing the error. Please help.

http://jsfiddle.net/neowot/p5y4t9co/1/

JS

function QueryGetta0() {
            var TTsearchQuery = 'lana del rey';
            return TTsearchQuery;
}


function QueryGetta1() {            
            $.get(
                "https://www.googleapis.com/youtube/v3/search",{
                    part: 'snippet',
                    maxResults: 1,
                    q: QueryGetta0(),
                    type: 'video',
                    key: 'AIzaSyCvk3NNMQASZgFkCNxIp9jH-l8O0PXhDUo'},
                    function(data) {
                        $.each(data.items, function(i, item){
                            console.log(item);
                            TTsearchResultID = item.id.videoId;
                            console.log(TTsearchResultID);
                        })
                    }
            );  
            return TTsearchResultID;
}



$('#clicker').on('click', function() {        
        alert(QueryGetta1());
});

1 Answer 1

1

The $.get() method like $.ajax() or $.json() are asynchronous methods that means you receive the data AFTER your code has executed return TTSearchResultID

Here is one way of doing what you want to achieve (I also removed your useless $.each because you were requesting only ONE item) :

function QueryGetta0() {
            var TTsearchQuery = 'lana del rey';
            return TTsearchQuery;
}


function QueryGetta1() {
    return $.get(
                "https://www.googleapis.com/youtube/v3/search",{
                    part: 'snippet',
                    maxResults: 1,
                    q: QueryGetta0(),
                    type: 'video',
                    key: 'AIzaSyCvk3NNMQASZgFkCNxIp9jH-l8O0PXhDUo'}
            );  
}



$('#clicker').on('click', function() {        
        QueryGetta1()
        .done(function(data) { //Inside this function, do everything you want with data
            var TsearchResultID = data.items[0].id.videoId;
            alert(TsearchResultID);
        });
});

Fiddle : http://jsfiddle.net/p5y4t9co/6/

Explanation :

$.get returns a jqXHR object. On this object we can use .done(pCallbackOnSuccess) or .fail(pCallbackOnFail).

The .done method is called when the request is successful, the callback will receive the requested data as a parameter and if the request encoutered an error, it's .fail which is called, the callback will receive the error object.

Exemple of using both :

    $.get(options)
        .done(function(data) {
            //do what you want with data
        })
        .fail(function(error) {
            //do what you want with the error
        });
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.