显示 JSON 请求答案

【问题标题】：Display JSON Request显示 JSON 请求
【发布时间】：2017-09-27 22:05:22
【问题描述】：

<html>
<head>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCiWypivJjO5CIQPVVfFlVQA&key=AIzaSyD5FVw6fP3ingbjTvUEzm-EYctX2ytfL2Y', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};
</script>
</head>
<body>
</body>
</html>

我的问题很简单，我请求了 JSON YouTube v3 Data API，但是，我想显示从链接请求的数据：https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCiWypivJjO5CIQPVVfFlVQA&key=AIzaSyD5FVw6fP3ingbjTvUEzm-EYctX2ytfL2Y 即订阅者数量，我将如何使用这个 GET 请求将订阅者的数量加载到元素的 innerHTML 中？我该怎么办？

【问题讨论】：

你能粘贴这个服务的json响应吗？

标签： javascript json youtube get google-api-js-client

【解决方案1】：

使用通过解析 JSON (data) 获得的对象，获取 subscriberCount 值并使用 .innerHTML 将其放入 div 或其他元素中。确保您使用 request.send() 实际发送您的 AJAX 请求。

<html>
<head>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCiWypivJjO5CIQPVVfFlVQA&key=AIzaSyD5FVw6fP3ingbjTvUEzm-EYctX2ytfL2Y', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    document.getElementById("subs").innerHTML = data.items[0].statistics.subscriberCount;
  } else {
    // We reached our target server, but it returned an error
  }
};

request.send();
</script>
</head>
<body>
<div id="subs"></div>
</body>
</html>

【讨论】：

谢谢，您的解决方案对我很有帮助。