Question

这是一个FreeCodeCamp项目，我应该在其中显示一个频道是否有效。但是，在我创建的频道列表中，有一些频道是直播的，而某些频道并不存在。尽管如此，无论如何，当我尝试在我的codepen中测试它时，它仍然显示＆＃34;离线＆＃34;，即使有些应该显示＆＃34;帐户没有存在＆＃34;或＆＃34;在线＆＃34;。我仍然无法弄明白。我测试了网址，以确保它正常工作并且正常工作。以下是一个例子：＆＃34; https://api.twitch.tv/kraken/streams/OgamingSC2?client_id=egn4k1eja0yterrcuu411n5e329rd3＆＃34;。

这是我的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>');
    }

  });
  }
}

这是我的代码在行动中：https://codepen.io/kikibres/pen/EWooLK。我知道它没有完成。一旦确定api正确显示数据，我将完成其余的工作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

部分问题是你的for循环。 Javascript for in循环用于迭代对象中的键。对于数组，键是索引，表示以下内容......

for (var channel in channels) {

将channel设置为：

0
1
2
...

这将导致您的网址如下：

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

我认为您想要的是channels数组中的频道名称，以便您的网址如下所示：

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...
}

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

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

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

1 个答案: