Assign data from REST YOUTUBE DATA API 3 to a variable outside callback Function Jquery

Question

Problem: I want to get the data from the REST API call and assign it to a variable and use that as an input for another Function or Purpose.

Function:

function getSongName(id, callback) {
        var apikey = {My_TOKEN};
        var fetchInformation = "https://www.googleapis.com/youtube/v3/videos?key=" +apikey +"&fields=items(snippet(title" +"))&part=snippet&id=" +id;
        $.getJSON(fetchInformation, function (jsonData) {
            fullname = jsonData.items[0].snippet.title;
            callback(fullname);
        });
    }

I am calling this function in another place with

var title = getSongName(youtubeID, function(name) {
                                    console.log("song name is :"+name);
                                });

I get the value in console.log as required. Now I want to use this title in

z.innerHTML = '<b>' + title + 'num: ' + j + '</b>';

Here j is coming from another place so I cannot use it inside the "getSongName" call.

Is there a way not just to do console.log inside but actually assign the "name" to another variable and use it as what I want above?

I don't know if there is another way of doing this that I have not come across but any help will be appreciated.

SOLVED -----------STEPS MENTIONED BELOW

function getSongName(youtubeID, idForPlayer,i, z, callback) {
    var apikey = {My_TOKEN};
    var fetchInformation = "https://www.googleapis.com/youtube/v3/videos?key=" +apikey +"&fields=items(snippet(title" +"))&part=snippet&id=" +id;

//$.ajaxSetup({'async':false}); WILL return the value for each loop and not do it asynchronously which had me pulling my hair out. P.S. this was the reason only one value was being returned
$.ajaxSetup({'async':false});
        $.getJSON(fetchInformation, function (jsonData) {
            debugger;
            var fullname = jsonData.items[0].snippet.title;
            boolean = false;
            if (fullname) {
                boolean = true;
                if (boolean){
                    console.log("song name inside the gerSongName loop is: " + i +" ", fullname);
                    callback(fullname);
                }
                debugger;
            }
            else {
                debugger;
                console.log("No song name");
            }

        });
    }

Then inside another function which is run in a loop I called the above function to get me the value.

getSongName(youtubeID, idForPlayer,i, z, function(name) {
                                    z.innerHTML = '<b>' + name + '</b>';
                                    debugger;
                                    document.getElementById('elementTagID').appendChild(z);

                                });

Hope this helps someone else. Thank you.

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Feb 15 '17 at 23:11

Luciano Trez · Answer 1 · 2017-02-16T00:39:07.803

0

You could put outside of the function a var declaration like this:

var fullname = "";

function getSongName(id, callback) {
        var apikey = {My_TOKEN};
        var fetchInformation = "https://www.googleapis.com/youtube/v3/videos?key=" +apikey +"&fields=items(snippet(title" +"))&part=snippet&id=" +id;
        $.getJSON(fetchInformation, function (jsonData) {
            fullname = jsonData.items[0].snippet.title;
            callback();
        });
    }

But the call is async, so the var only gets value after callback.If I understood the question.. I think it's more right to use callback directly like you do for logging.

edited Feb 16 '17 at 00:39

answered Feb 16 '17 at 00:33

Luciano Trez

149
2
12

Thank you. and where would you put this `z.innerHTML = '' + title + 'num: ' + j + '';` ? Also where is the data assigned to `fullname` ? – sungazerr Feb 16 '17 at 07:52
Should be inside a function on callback, like you do for logging. In my sample I'll put that line inside the function that is passed when call getSongName.. Like this: getSongName(1, function () { z.innerHTML = '' + title + 'num: ' + fullname + ''; }); But fullame is still available for other use outside that callback function. – Luciano Trez Feb 16 '17 at 13:30

Chris · Answer 2 · 2017-02-16T10:08:22.647

0

I'd probably take a different approach and change the structure to this:

z.innerHTML = '<b><span class="title"></span>num: ' + j + '</b>';

And then in your callback:

document.querySelector('.title').textContent = name;

Or for browsers that don't support textContent:

document.querySelector('.title').innerHTML = name;

See the following plunk: https://plnkr.co/edit/k5Evt98M5fiOazU7tpKU

edited Feb 16 '17 at 10:08

answered Feb 16 '17 at 00:53

Chris

355
1
8

This could work but the problem is, Im making this `z.innerHTML` dynamically so if I apply your solution, only the last name out of many names will get printed. Also take into account, I want the `j` to be dynamic aswell. – sungazerr Feb 16 '17 at 07:51
Ok, it's a bit difficult without seeing the rest of your code, but I've made a plunk here - https://plnkr.co/edit/k5Evt98M5fiOazU7tpKU - to demonstrate my code, maybe this will help. I'm not sure why you say only the last name will get printed out but maybe you have a loop running somewhere that we're not seeing. – Chris Feb 16 '17 at 10:07
Thank you Chris :) I got it working finally!! So what I did was instead of taking the data out of the function I injected other data into the function and did the deed inside it. I will update my initial question to show what I did for references. Might help others save hours of work. Thank you all!! – sungazerr Feb 16 '17 at 18:40

Assign data from REST YOUTUBE DATA API 3 to a variable outside callback Function Jquery

2 Answers2