JSON get data form url using javascript and than save the data to a 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 is have done so far. I need to get the id form a Youtube channel but i have a Youtube name. So i need to convert the name to the youtube channel id. The "Function loadchannelID" is what i have so far, it works but i need to get the #ytID to a var. But I dont know how to do that. The other function is to show the data from the Channel ID and that will work aswell if the id is converted to a var. Please help! Thanks!

This code is async. Either use callbacks or promises ( especially *await*) — Jonas Wilms, Jun 17 '17 at 16:54

score 1 · Accepted Answer · answered Jun 17 '17 at 17:17

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

Thank you so much! I couldn't figure it out and i was trying for hours!! Thanks! — Dani Kemper, Jun 17 '17 at 17:21

score 0 · Answer 2 · answered Jun 17 '17 at 17:08

I am not clear if you are trying to get the value or you try to make the url but in both cases you can do:

if you want to get the param value you can use:

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

if you want to set the param you can do:

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

score 0 · Answer 3 · answered Jun 17 '17 at 17:18

As ive already said, your code is async, so you may use Promises like this:

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 like this:

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

score -1 · Answer 4 · answered Jun 17 '17 at 17:04

I assume you want to use your var within the class and chanName is your channel ID and name container array

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

JSON get data form url using javascript and than save the data to a var

4 Answers4