为什么 Twitchtv API Stream 只显示每个频道的“离线”？

Question

这是一个 FreeCodeCamp 项目，我应该在其中显示频道是否直播。但是，在我创建的频道列表中，有些频道是直播的，有些频道不存在。尽管如此，无论如何，当我尝试在我的 codepen 中对其进行测试时，它仍然显示 "Offline"，即使有些应该显示 "The Account doesn't exist" 或 "Online"。我还是想不通。我确实测试了 url 以确保它正常工作并且正常工作。这是一个示例：“https://api.twitch.tv/kraken/streams/OgamingSC2?client_id=egn4k1eja0yterrcuu411n5e329rd3”。

这是我的 JS 代码：

$(document).ready(function() {

  getSteams();

});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3";

function getSteams() {

  for (var channel in channels) {
    var indchannel = channel;

  $.ajax({
      url: "https://api.twitch.tv/kraken/streams/" + indchannel + cb,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    success: function(data) {

      var game;
      var status;

      if(data.stream === null) {
        game = "Offline";
        status = "offline";
      } else if (data.stream === undefined) {
        game = "The Account doesn't exist";
        status = "Account is closed";
      } else {
        game = data.stream.game;
        status = "online";
      };

       $("#channels").append('<div class="indbox"><a target="_blank" href="#">'+ game +'</a></div>');
    }

  });
  }
}

这是我的 codepen 的实际操作：https://codepen.io/kikibres/pen/EWooLK。我知道它还没有完成。一旦我确保 api 正确显示数据，我将完成剩下的工作。

$(document).ready(function() {
  
  getSteams();
  
});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3";

function getSteams() {
  
  for (var channel in channels) {
    var indchannel = channel;
  
  
  $.ajax({
      url: "https://api.twitch.tv/kraken/streams/" + indchannel + cb,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    success: function(data) {
    
      var game;
      var status;
      
      if(data.stream === null) {
        game = "Offline";
        status = "offline";
      } else if (data.stream === undefined) {
        game = "The Account doesn't exist";
        status = "Account is closed";
      } else {
        game = data.stream.game;
        status = "online";
      };
      
       $("#channels").append('<div class="indbox"><a target="_blank" href="#">'+ game +'</a></div>');
    }
  
  
  });
  }
}

html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  display:block;
}
.container {
  width: 75%;
  margin: 30px auto 0;
  position: relative;
}
.logobox img {
  width: 20%;
  margin: 0 auto;
}
.con-button {
  background-color: white;
 border: none;
 margin: 0.5em 0 0 0;
 padding: 0.5em 1em 0.5em 1em;
  text-align: center;
 color: rgb(100,65,164);
  font-size: 20px;
}
.activate {
  border-bottom: 1px solid #6441A4;
}
.divider hr {
  border-top: 1px solid #6441A4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="twitchtvarea">
      <div class="logobox">
        <img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
      </div>
      <div class="twitchbox">
        <div class="controls">
          <button id="c-all" class="con-button" type="button">All</button>
    <button id="c-online" class="con-button" type="button">Online</button>
    <button id="c-offline" class="con-button" type="button">Offline</button> 
        </div>
        <div class="divider"><hr></div>
        <div id="channels">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

部分问题是您的 for 循环。 Javascript for in 循环用于迭代对象中的键。在数组的情况下，key就是索引，意思如下...

for (var channel in channels) {

将 channel 设置为：

0
1
2
...

这将使您的 URL 看起来像：

https://api.twitch.tv/kraken/streams/0

我假设您想要的是 channels 数组中的频道名称，这样您的 URL 将如下所示：

https://api.twitch.tv/kraken/streams/SomeChannelName

您可以通过以下两种方式之一修复您的 for 循环。第一个是比较传统的for循环：

for (int i = 0; i > channels.length; i++) {
    var indchannel = channels[i];

    // perform your ajax calls here...
}

或者您可以使用 Array.forEach() 方法，它为数组中的每一项调用一个函数。

channels.forEach(function(indchannel, index, arr) {
    // perform your ajax calls here...
});

为什么 Twitchtv API Stream 只显示每个频道的“离线”？

Why is Twitchtv API Stream only display “offline” for each channel?

html

javascript

css

twitch