REST YOUTUBE DATA API 3의 데이터를 콜백 외부 변수에 지정 함수 Jquery

Question

문제점 : REST API 호출에서 데이터를 가져 와서이를 변수에 할당하고이를 다른 함수 또는 용도의 입력으로 사용하려고합니다.

기능 : 내가

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

와 다른 장소에서이 함수를 호출하고

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); 
     }); 
    } 

필요에 따라 내가 CONSOLE.LOG의 값을 얻는다. 는 지금은 j 그래서 나는 "getSongName"호출 내에서 사용할 수없는 다른 장소에서오고 여기

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

에서이 제목을 사용하고 싶습니다.

내부에는 console.log을 수행하는 것이 아니라 실제로 다른 변수에 "이름"을 할당하고 내가 원하는 것처럼 사용합니까?

이 작업을 수행하는 또 다른 방법이 있는지 모르겠지만 어떤 도움도 받으실 수 없습니다.

이 해결 ----------- STEPS 내가 나에게 값을 얻기 위해 위의 함수를 호출 루프에서 실행되는 다른 함수 내에서 다음

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"); 
      } 

     }); 
    } 

아래에 언급.

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

           }); 

희망이 있으면 다른 사람에게 도움이됩니다. 감사합니다.

Answer 1

당신은 함수의 외부에서이 같은 VAR 선언 넣을 수 :

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(); 
     }); 
    } 

을하지만 호출이 비동기이기 때문에, VAR은 내가 더 생각 .. 제가 질문을 이해 callback.If 후 값을 가져옵니다 당신이 로깅 할 때처럼 콜백을 직접 사용할 수 있습니다.

Answer 2

아마 다른 접근 방식을 취하고 여기에 구조를 변경 것 :

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

을 그리고 콜백에서 :

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

또는는 TextContent를 지원하지 않는 브라우저를위한

:

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

다음 plunk를 참조하십시오. https://plnkr.co/edit/k5Evt98M5fiOazU7tpKU