JSON gets the url of the data form using javascript and saves the data in var

Question

<script type="text/javascript">

        $(document).ready(function() {

            var chanName = "";

            loadchannelID("Pewdiepie");

            function loadchannelID(name){

                chanName = name;

                var nameid= 'https://www.googleapis.com/youtube/v3/channels?part=id&forUsername='+name+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI'
                $.getJSON(nameid, function(data) {
                    $('#ytID').html(data.items[0].id); 
                //MAKE IT TO A VAR                    
            });


            }

            function loadChannel(data) {

                var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+id+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI';
                $.getJSON(url, function(data) {
                    $('#odometer').html(data.items[0].statistics.subscriberCount);
                    $('#viewCount').html(data.items[0].statistics.viewCount);
                    $('#commentCount').html(data.items[0].statistics.commentCount);
                    $('#videoCount').html(data.items[0].statistics.videoCount);
                });

                var url1 = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id='+id+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI';
                $.getJSON(url1, function(data){
                    $('#ytName').html(data.items[0].snippet.title);
                    $('#ytDis').html(data.items[0].snippet.description);
                    $('#ytImage').html('<a href=\"https://www.youtube.com/'+ data.items[0].snippet.customUrl + '\"> <img class="img-circle" src=\"'+data.items[0].snippet.thumbnails.medium.url+'\" ></a>');
                });
            }

            setInterval( function() {
                var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+chanName+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI';
                $.getJSON(url, function(data) {
                    $('#odometer').html(data.items[0].statistics.subscriberCount);
                    $('#viewCount').html(data.items[0].statistics.viewCount);
                    $('#commentCount').html(data.items[0].statistics.commentCount);
                    $('#videoCount').html(data.items[0].statistics.videoCount);
                });

            }, 5000);

            $('#update').click( function(){
                loadchannelID($('#chnlName').val());
            })            
        });

    </script>

This is what has been done so far. I need to get a Youtube form id, but I have a Youtube name. So I need to convert the name to the youtube channel id. The "loadchannelID function" is what I still have, it works, but I need to get #ytID for var . But I do not know how to do this. Another function is to show data from the channel identifier, and this will work if the identifier is converted to var. Please help! Thank!

Answer 1

Hope this is what you want to achieve:

var chanName = "";
var chanID = 0;

loadchannelID("Pewdiepie");

function loadchannelID(name){
  chanName = name;
  var nameid= 'https://www.googleapis.com/youtube/v3/channels?part=id&forUsername='+name+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI'
  $.getJSON(nameid, function(data) {
    chanID = data.items[0].id;
    $('#ytID').html(chanID); 
    loadChannel(chanID); // now, you know the ID, pass it to "loadChannel"            
  });
}

function loadChannel (id) {
  var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+id+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI';
  $.getJSON(url, function(data) {
    $('#odometer').html(data.items[0].statistics.subscriberCount);
    $('#viewCount').html(data.items[0].statistics.viewCount);
    $('#commentCount').html(data.items[0].statistics.commentCount);
    $('#videoCount').html(data.items[0].statistics.videoCount);
  });

  var url1 = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id='+id+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI';
  $.getJSON(url1, function(data){
    $('#ytName').html(data.items[0].snippet.title);
    $('#ytDis').html(data.items[0].snippet.description);
    $('#ytImage').html('<a href=\"https://www.youtube.com/'+ data.items[0].snippet.customUrl + '\"> <img class="img-circle" src=\"'+data.items[0].snippet.thumbnails.medium.url+'\" ></a>');
  });
}

Answer 2

, url, :

, :

var url_string = "https://www.googleapis.com/youtube/v3/channels?part=id&forUsername=Pewdiepie&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI";
var url = new URL(url_string);
var forUsername = url.searchParams.get("forUsername");

, :

var forUsername = url.searchParams.set("forUsername", yourValueHere);

Answer 3

As already mentioned, your code is asynchronous, so you can use Promises as follows:

function loadchannelID(name){
 return new Promise(function(resolve){
    var chanName = name;
    var nameid= 'https://www.googleapis.com/youtube/v3/channels?part=id&forUsername='+name+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI'
  $.getJSON(nameid, function(data) {
     $('#ytID').html(data.items[0].id); 
     //lets resolve the promise
     resolve(data.items[0].id);                
  });
 });
}

So you can use it as follows:

loadChanelID("test").then(function(name){
 alert("name is"+name);
});

If you change

function loadChannel(data) {

To:

function loadChannel(id){

You can do:

loadChanelID("test").then(loadChannel);

Answer 4

I assume you want to use your var in the class, and chanName is your channel id and array of names

(function($, jsYouTube){

    var chanName = "";

    $.getChannelID = function loadchannelID(name){

        chanName = name;

        var nameid= 'https://www.googleapis.com/youtube/v3/channels?part=id&forUsername='+name+'&key=AIzaSyCppVQFcUiLE8-Z2JSyjpvvek8WfPeCfcI'
        $.getJSON(nameid, function(data) {
            $this.chanName['id'] = data.items[0].id ;
        });


    }
})(jQuery, 'jsYouTube');