javascript - 为什么将 .getJSON 中的名称声明为列表中的索引后仍未定义(JavaScript/JQuery)

Question

我使用 .getJSON 从 Twitch API 获取 display_name。当用户帐户被停用(422)或不存在(404)时，display_name 键不存在并返回未定义。我尝试通过仅使用我迭代的列表(streamerList)中的名称作为变量名称来解决它。

var streamerList = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "rocketbeanstv", "diehahn","myleschuahiock","brunofin","comster404"];


for (var x = 0; x < streamerList.length; x++) {
     var name = streamerList[x];
     $.getJSON("https://api.twitch.tv/kraken/channels/" + streamerList[x] + "/?callback=?", function (json) {

当 display_name !== null 时，我要求 for 循环将声明的变量、名称更改为显示名称

name = json.display_name;

但不知何故它仍然不起作用？有人能告诉我为什么会这样吗？ (因为我还在起步)并提供解决方案？

完整的示例位于: http://codepen.io/myleschuahiock/pen/oxbGGj

JSLint 还告诉我不要在 for 循环内执行函数。这会是问题所在吗？

Answer 1

您正在检查 display_name 是否为空。您应该检查未定义。

这是更改 -

if (json.display_name !== undefined) {
    name = json.display_name;
}

$(document).ready(function() {
  var streamerList = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "rocketbeanstv", "diehahn","myleschuahiock","brunofin","comster404"];
  for (var x = 0; x < streamerList.length; x++) {
    var name = streamerList[x];
    $.getJSON("https://api.twitch.tv/kraken/channels/" + streamerList[x] + "/?callback=?", function (json) {
      var logo = json.logo;
      if (json.display_name !== undefined) {
        name = json.display_name;
      }
      var game = json.game; //categorical activity
      var url = json.url; // url
      var views = json.views; //int
      var followers = json.followers; //int
      var status = json.status; //null or on-going stream title
      var profile = "http://www.twitch.tv/" + json.name + "/profile"; //url to profile
      var profileHighlights = "http://www.twitch.tv/" + json.name + "/profile/highlights"; //url to video highlights
      var profileChatRoom = "http://www.twitch.tv/" + json.name + "/chat"; //url to profilechatroom
      // console.log(name + url + views + followers + status + profile + profileHighlights + profileChatRoom);
      
      if (logo === null) {
        logo = "https://myleschuahiock.files.wordpress.com/2016/03/no_user.gif";
      }

      //Adds the class offline to class="status-light" if the game === null (meaning the streamer isn't playing/offline)
      var statusLight = "";
      if (game === null && name !== null) {
        game = "Offline";
        status = "Offline";
        statusLight = "offline";
      } else if (status === 404) {
        game = "Does not Exist";
        status = "";
        statusLight = "offline";
      } else if (status == 422) {
        game = "Account Deactivated";
        status = "";
        statusLight = "offline";
      }
        $(".tv-screen").append('<div class="streamer '+ name + '"><div class="col col-1"><img class="profile-logo" src="' + logo + '"></div><div class="col col-2"><h1 class="display-name"><a href="' + url + '" target="_blank">' + name + '</a></h1><p class="status">' + status + '</p></div><div class="col col-3"><div id="status-lightID" class="status-light '+ statusLight + '"></div><p class="status-game">'+ game +'</p><p class="view-count">' + views + ' views</p><p class="follower-count">' + followers + ' followers</p></div><div class="col col-4"><p><a href="' + profile + '" target="_blank">Profile</a></p><p><a href="' + profileHighlights + '" target="_blank">Hightlights</a></p><p><a href="' + profileChatRoom + '" target="_blank">Chat</a></p></div></div>');
      
    });
  }
});

@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,700);
body {
  background-color: #9b53d2;
  margin: 0;
  padding: 0;
  font-family: 'Fira Mono', sans-serif;
}


/* IMAGE SET 1 */

.image-set {
  position: relative;
  background-color: blue;
  margin: 0 auto;
  width: 1200px;
  height: 1px;
}

.logo {
  width: 270px;
  height: 93px;
  position: relative;
  top: 50px;
  left: 40%;
}

.decor {
  position: absolute;
}


/* If you want the img to follow the horizontal screen-scrolling, you have to set it absoulte to a div that is relative! */


/* This is required if you want the images to 'ride' along with the horizontal screen overflow */

.vader {
  width: 110px;
  height: 220px;
  top: 121px;
  left: 108px;
}

.capcom {
  width: 171px;
  z-index: -1;
  height: 171px;
  top: 185px;
  left: 215px;
}

.joker {
  width: 65px;
  height: 90px;
  top: 230px;
  left: 385px;
}

.superman {
  width: 108px;
  height: 102px;
  top: 55px;
  left: 350px;
}

.fett {
  width: 85px;
  height: 116px;
  top: 210px;
  left: 470px;
}

.batman-robin {
  width: 220px;
  height: 107px;
  top: 215px;
  left: 570px;
}

.ironman {
  width: 88px;
  height: 119px;
  top: 45px;
  left: 770px;
}

.campbells {
  width: 140px;
  height: 180px;
  top: 150px;
  left: 840px;
}

.mario-peach {
  width: 256px;
  height: 256px;
  top: 100px;
  left: 960px;
}


/* IMAGE SET 2 */

.image-set-2 {
  position: relative;
  width: 1200px;
/*   height: 100px; */
  margin: -180px auto 0 auto;
}

.daisy {
  width: 124px;
  height: 196px;
  top: 110px;
  right: -60px;
}

.burgers {
  width: 165px;
  height: auto;
  top: 100px;
  left: -60px;
}

.watermark-1 {
  position: absolute;
  top: 230px;
  left: 40%;
  color: white;
  text-align: center;
}

.watermark-2 {
  position: absolute;
  top: 260px;
  left: 42%;
  font-size: 12px;
  color: white;
  text-align: center;
}


/* TWITCH SCREEN */

.tv-frame {
  width: 1200px;
  height: 1000px;
  background-color: #7a41a5;
  margin: 300px auto 0 auto;
  padding-top: 19px;
}

.banner {
  margin: 0 auto;
  width: 1100px;
  height: 55px;
  background-color: #9b53d2;
  box-shadow: 0 5px 15px #222;
}

.banner-tag {
  color: white;
  letter-spacing: 10px;
  text-align: center;
  vertical-align: middle;
  padding-top: 10px;
}

.tv-screen {
  width: 980px;
  background-color: white;
  height: 840px;
  margin: 0 auto;
  box-shadow: 0 5px 15px #222;
  overflow: scroll;
}


/* STREAMER IN TV-SCREEN CSS */

.streamer {
  width: 99.6%;
  height: 150px;
  border: 2px solid #7a41a5;
}

/* ALL COL STYLING */
.col {
  height: 120px;
  float: left;
/*   background-color:red; */
}

/* COL-1 Styling */
.col-1 {
  padding: 0;
  margin: 0;
/*   background-color: red; */
}

.profile-logo {
  border-radius: 100%;
  width: 85px;
  height: 85px;
  margin: 30px 0 0 100px ;
}

.col-2 {
  width:270px;
  margin-left:50px;
}
.display-name {
  padding-top:20px;
 font-size:22px; 
}
.status {
  font-size:16px;
  margin:-10px 0 0 0;
}

.col-2 a {
  color:black;
  text-decoration:none;
}

.col-3 {
  height:100px;
  width:200px;
  margin:30px 0 0 20px;
  font-size:14px;
}

.col-3 p:nth-child(n+1) {
  margin: 12px 0 0 0;
  padding:0;
}

.status-light {
  width:15px;
  height:15px;
  margin-right:10px;
  background-color:#9b53d2;
  border-radius:10px;
  float:left;
}

.offline {
  width:15px;
  height:15px;
  margin-right:10px;
  background-color:grey;
  border-radius:10px;
  float:left;
}

.status-game {
  display:inline;
}

.col-4 {
  margin:23px 0 0 40px;
}

.col-4 p {
  margin:0 0 0 0;
  padding:0;
  font-size:16px;
  height:auto;
}

.col-4 p:nth-child(n+1) {
  margin: 12px 0 0 0;
}


.col-4 a:link, .col-4 a:visited, .col-4 a:hover, .col-4 a:active {
  color:black;
  text-decoration:none;
}

.image-set-2 a {
  color:white;
  text-decoration:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-set">
  <img class="decor logo" src="https://myleschuahiock.files.wordpress.com/2016/03/twitch-logo.png">
  <img class="decor vader" src="https://myleschuahiock.files.wordpress.com/2016/03/darth-vader1.gif">
  <img class="decor capcom" src="https://myleschuahiock.files.wordpress.com/2016/03/capcom-fight1.gif">
  <img class="decor joker" src="https://myleschuahiock.files.wordpress.com/2016/03/joker1.gif">
  <img class="decor superman" src="https://myleschuahiock.files.wordpress.com/2016/03/superman1.gif">
  <img class="decor fett" src="https://myleschuahiock.files.wordpress.com/2016/03/fett1.gif">
  <img class="decor batman-robin" src="https://myleschuahiock.files.wordpress.com/2016/03/batman-robin1.gif">
  <img class="decor ironman" src="https://myleschuahiock.files.wordpress.com/2016/03/ironman1.gif">
  <img class="decor campbells" src="https://myleschuahiock.files.wordpress.com/2016/03/campbells1.gif">
  <img class="decor mario-peach" src="https://myleschuahiock.files.wordpress.com/2016/03/mario-peach1.gif">
</div>
<div class="tv-frame">
  <div class="banner">
    <h1 class="banner-tag">FAVORITE TWITCH TV STREAMERS</h1>
  </div>
  <div class="tv-screen">
    
<!--   STREAMER TEMPLATE SAMPLE   -->
<!--     <div class="streamer">
      <div class="col col-1"><img class="profile-logo" src="https://myleschuahiock.files.wordpress.com/2016/03/starcraft-logo.gif"></div>
      <div class="col col-2">
        <h1 class="display-name"><a href="#" target="_blank">StarCrayBoy3</a></h1>
        <p class="status">Fighting zergs 1v5 hard mode insta-kill time.</p>
      </div>
      <div class="col col-3">
        <div class="status-light"></div>
        <p class="status-game">Star Craft II</p>
        <p class="view-count">201,234</p>
        <p class="follower-count">23,421</p>
      </div>
      <div class="col col-4">
        <p><a href="#">Profile</a></p>
        <p><a href="#">Hightlights</a></p>
        <p><a href="#">Chat</a></p>
      </div>
    </div> -->
    
<!--   STREAMERS END HERE   -->
  </div>
<!-- TV SCREEN ENDS HERE -->
</div>
<div class="image-set-2">
  <img class="decor burgers" src="https://myleschuahiock.files.wordpress.com/2016/03/burgers-cut.gif">
  <p class="watermark-1"><a href="http://codepen.io/myleschuahiock/" target="_blank">codepen.io/myleschuahiock</a></p>
  <p class="watermark-2"><a href="http://8bitdecals.com/8-bit-image-gallery/" target="_blank">Photos from 8bitdecals.com</a></p>
  <img class="decor daisy" src="https://myleschuahiock.files.wordpress.com/2016/03/daisy.png">
</div>