使用JavaScript从URL获取JSON数据并将数据存储到变量中

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>

这是我目前所做的。我需要从一个YouTube频道获取ID，但只有频道名称。因此，我需要将名称转换为YouTube频道ID。 "Function loadchannelID"是我目前所拥有的内容，它可以工作，但我需要将＃ytID转换为var。但我不知道该怎么做。另一个函数是显示来自频道ID的数据，如果ID被转换为var，那也能够工作。请帮帮我！谢谢！

- Dani Kemper

---

这段代码是异步的。要么使用回调函数，要么使用 Promises（特别是 await）。 - Jonas Wilms

你能给我们展示一下你的其他代码吗？ - PeterMader

Answer 1

我希望这是您想要实现的内容：

我希望这是您想要实现的内容：

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

- PeterMader

---

非常感谢！我一直在尝试解决这个问题，但是却无法弄清楚，已经试了好几个小时了！谢谢！ - Dani Kemper

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

- Ivan Lynch

Answer 3

就像我之前所说的一样，你的代码是异步的，因此你可以像这样使用 Promises：

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

所以你可以像这样使用它：

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

如果你改变了

function loadChannel(data) {

To:

function loadChannel(id){

你可以做：

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

- Jonas Wilms

Answer 4

我猜你想在类内使用你的变量，chanName是你的频道ID和名称容器数组

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

- Mason.Chase

---

$this是什么？ - PeterMader