Question

我正在学习编码和挑战我需要获取有关一些抽搐频道的信息，并更新频道信息和状态（如果它是实时流式传输）。由于Twitch API约束，我调用端点来获取通道信息，然后调用另一个端点以查看哪个频道正在直播，哪个不是。

现在我要做的是，循环浏览streamsJson，检查频道ID是否与我的频道匹配，并将状态更新为直播，我需要你的帮助。

$("document").ready(function() {

  var getUserInfo = $.ajax({
    type: "GET",
    url: "https://api.twitch.tv/helix/users/?login=ESL_SC2&login=freecodecamp&login=OgamingSC2&login=cretetion&login=storbeck&login=habathcx&login=RobotCaleb&login=noobs2ninjas",
    contentType: ('application/x-www-form-urlencoded; charset=UTF-8'),
    crossDomain: true,
    headers: {
      "Client-ID": "5k4g3q59o69v6p9tudn39v50ro1mux",
    },
    dataType: "json",
    error: function() {
      console.log("Users call failed");
    },
    success: function(usersJson) {
      console.log(JSON.stringify(usersJson, null, 2));
      var getUserStatus = $.ajax({
        type: "GET",
        url: "https://api.twitch.tv/helix/streams/?channel=user_login=ESL_SC2&user_login=freecodecamp&user_login=OgamingSC2&user_login=cretetion&user_login=storbeck&user_login=habathcx&user_login=RobotCaleb&user_login=noobs2ninjas&stream_type=all",
        contenType: ('application/x-www-form-irlencoded; charset=UTF-8'),
        crossDomain: true,
        headers: {
          "Client-ID": "5k4g3q59o69v6p9tudn39v50ro1mux",
        },
        dataType: "json",
        error: function() {
          console.log("Streams call failed");
        },
        success: function(streamsJson) {
          console.log(JSON.stringify(streamsJson, null, 2));

          var jsonUsers = usersJson.data;
          // console.log(JSON.stringify(jsonUsers, null, 2));
          // console.log(jsonUsers[0].profile_image_url);

          // channel N° 1
          $("#img-holder1 > img").attr("src", jsonUsers[0].profile_image_url);
          $(".channelInfo1").attr("id", jsonUsers[0].id);
          $(".channelInfo1 > h3").text(jsonUsers[0].display_name);

          // channel N° 2
          $("#img-holder2 > img").attr("src", jsonUsers[1].profile_image_url);
          $(".channelInfo2").attr("id", jsonUsers[1].id);
          $(".channelInfo2 > h3").text(jsonUsers[1].display_name);

          // channel N° 3
          $("#img-holder3 > img").attr("src", jsonUsers[2].profile_image_url);
          $(".channelInfo3").attr("id", jsonUsers[2].id);
          $(".channelInfo3 > h3").text(jsonUsers[2].display_name);

          // channel N° 4
          $("#img-holder4 > img").attr("src", jsonUsers[3].profile_image_url);
          $(".channelInfo4").attr("id", jsonUsers[3].id);
          $(".channelInfo4 > h3").text(jsonUsers[3].display_name);

          // channel N° 5
          $("#img-holder5 > img").attr("src", jsonUsers[4].profile_image_url);
          $(".channelInfo5").attr("id", jsonUsers[4].id);
          $(".channelInfo5 > h3").text(jsonUsers[4].display_name);

          // channel N° 6
          $("#img-holder6 > img").attr("src", jsonUsers[5].profile_image_url);
          $(".channelInfo6").attr("id", jsonUsers[5].id);
          $(".channelInfo6 > h3").text(jsonUsers[5].display_name);

          // channel N° 7
          $("#img-holder7 > img").attr("src", jsonUsers[6].profile_image_url);
          $(".channelInfo7").attr("id", jsonUsers[6].id);
          $(".channelInfo7 > h3").text(jsonUsers[6].display_name);

          // channel N° 8
          $("#img-holder8 > img").attr("src", jsonUsers[7].profile_image_url);
          $(".channelInfo8").attr("id", jsonUsers[7].id);
          $(".channelInfo8 > h3").text(jsonUsers[7].display_name);

          var jsonStreams = streamsJson.data;
          console.log(JSON.stringify(jsonStreams, null, 2));
        },
      });
    },
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://codepen.io/HacNass/full/MVjBRq/

提前感谢您的帮助

循环遍历json和html元素

0 个答案: