在 For 循环中调用 get JSON 函数时出错

Question

我在重新格式化我的 JavaScript 时遇到了问题，方法是删除循环中的一个函数。

这是我的 JavaScript 代码：

$(document).ready(function () {
  //GET TWITCH TV STREAMERS' STATUS AND API CALL

  var twitchTvStreamers = ["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  //OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED
  for (var i = 0; i < twitchTvStreamers.length; i++) {

    //DO A GETJSON ON THIS ARRAY TO RETRIEVE INFORMATION FROM THE VALUES OF THOSE 8 TWITCH TV STREAMERS
    $.getjSON('https://wind-bow.glitch.me/twitch-api/streams' + val, function (st) {
      //var url="https://wind-bow.glitch.me/twitch-api/streams" 

      channelName = val;

      //IF ANY OF THE STATUSES OF THE 8 TWITCH TV STREAMERS ARE EQUAL TO NULL, OR OFFLINE, THEN DO SOMETHING
      if (st.stream === null) {
        //GET JSON INFO OF THOSE OFFLINE STREAMERS
        $.getjSON('https://wind-bow.glitch.me/twitch-api/channels' + val, function (ch) {

          channelID = ch.Display_name;
          channelLogo = ch.logo;
          channelUrl = ch.url;
          streamContent = ch.content;

          //POST INFO TO DISPLAY AREA OF WEB APP (...ADD OTHER STUFF TO THIS APPEND LATER)
          $('#offline').append('<div class="TV-screen">');
        });

      } else
        //REPEAT SAME SCENARIO AS USED FOR OFFLINE STREAM STATUS    
        $.getjSON('https://wind-bow.glitch.me/twitch-api/channels' + val, function (ch) {

          channelID = ch.Display_name;
          channelLogo = ch.logo;
          channelUrl = ch.url;
          streamContent = ch.content;

          $('#online').append('<div class="TV-screen">');
        });

    }

//帮助来自：https://www.youtube.com/watch?v=Nm2bXBlELZU&list=PLHdCowjFIBmJwYL9tPZOkn6CIVLg6Z36a, etc. etc......

我将上面的代码放入 www.jshint.com 中，结果如下：

三个警告":

11 不要在循环中创建函数。
42 应为 ')' 而看到的却是 ''。
49 不可恢复的语法错误。（100% 扫描）。

如何重新格式化我的代码（在第 11 行）以包含我的 get JSON 函数，但又不在循环中？

Answer 1

你忘了末尾有很多括号。这就是您的代码的样子

$(document).ready(function() {

//GET TWITCH TV STREAMERS' STATUS AND API CALL

var twitchTvStreamers = ["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

//OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED
twitchTvStreamers.map(function(val) {

    //DO A GETJSON ON THIS ARRAY TO RETRIEVE INFORMATION FROM THE VALUES OF THOSE 8 TWITCH TV STREAMERS
    $.getjSON('https://wind-bow.glitch.me/twitch-api/streams' + val, function(st) {
        //var url="https://wind-bow.glitch.me/twitch-api/streams"  

    channelName = val;

    //IF ANY OF THE STATUSES OF THE 8 TWITCH TV STREAMERS ARE EQUAL TO NULL, OR OFFLINE, THEN DO SOMETHING
    if (st.stream === null) {
        //GET JSON INFO OF THOSE OFFLINE STREAMERS
        $.getjSON('https://wind-bow.glitch.me/twitch-api/channels' + val, function(ch) {

            channelID = ch.Display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;

            //POST INFO TO DISPLAY AREA OF WEB APP (...ADD OTHER STUFF TO THIS APPEND LATER)
            $('#offline').append('<div class="TV-screen">');
        });

    } else {
        //REPEAT SAME SCENARIO AS USED FOR OFFLINE STREAM STATUS    
        $.getjSON('https://wind-bow.glitch.me/twitch-api/channels' + val, function(ch) {

            channelID = ch.Display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;

            $('#online').append('<div class="TV-screen">');

        });
       }
    }); // getJSON
}); // map
}); // ready

这解决了问题 2 和 3。但我仍然不确定您的代码中的 val 是什么。我猜是流名称，所以我将其添加到：

array.map() 函数而不是 for loop 以避免第一个问题

Answer 2

您在语法、拼写错误、错误的函数名称以及延迟的 returns 异步调用的占位符使用方面存在大量错误。错误摘要如下。同时，运行确保它确实有效的代码。

$(document).ready(function(){
// Who we want to stalk today
var twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

// Get the status of each channel using the getChannelInfo() function
for(channel of twitchTvStreamers){
    getChannelInfo(channel);
    }
});

// This function gets the status of each channel
// and, depending whether it is online or offline, 
// calls the appendInfo() function with the online/offline parameter
var getChannelInfo = channel => { 
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
    .done(function(info) {
        if (info.stream === null) appendInfo(channel,'offline');
        else appendInfo(channel,'online');
    });
}

// This function gets info on whether the channel is online or offline. 
// Depending on this status, it gets the channel info 
// and appends it in the respective `<div>`
var appendInfo = (channel,target) => {
    $.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
        .done( function(ch){
            channelID = ch.display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;
            $('#'+target).append('<div class="TV-screen">'+channel+' is '+target);
        });    
}

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

那么，您的代码问题是：

channel = val; 设置通道变量，而不是 val 变量。 val = channel 会设置 val 变量，但这在您的代码中也不起作用。您可以将 val 设置为 val = twitchTvStreamers[i];
getjSON 应拼写为 getJSON - 大小写很重要！
ch.Display_name 将不起作用，因为返回的对象键拼写为 display_name。再次强调，小心你的案件。
$('#offline').append('<div class="TV-screen">'); - 这只会向 #offline 元素添加一个空白 <div>。您还需要在此处包含一些 channel-specifit 信息。
而且，最重要的是，你必须准确理解JS Promise works. The last best resource I read on this was Kyle Simpson's Asynch & Performance他的你不懂 JS 系列的书。 jQuery 的 getJSON 使用 Promise 接口，因此了解底层技术绝对有帮助。

简而言之 - 当您制作 asynch call 时，响应需要一段时间才能完成，同时其他代码会执行。例如，您有一个名为 status 的变量，并且您正在对 Twitch 频道 foo 和 bar[ 的状态进行 API 调用=77=]。在返回 API 响应之前，您的代码已经在页面上打印出 <div id="foo"> 和 <div id="bar">。然后状态返回，通道 foo 的状态返回为 online 并将 status 变量设置为 'online'。然后，bar 的状态返回为 'offline' 并将 status 变量设置为离线。而且，如果处理不当，JS returns 这最后一个值（离线），它适用于你所有的元素。

您必须能够进行调用并将其结果承诺给正确的 DOM 元素。我是这样做的：

获取状态

如果在线，获取频道详情，生成一个DOM元素，附加到'online' div

如果离线，获取频道详情，产生一个DOM元素，追加到'offline' div

此处生成和附加 DOM 元素的顺序不跨越进行 AJAX 调用和获取结果的顺序。最简单的方法是将这个序列分解为单独的函数，然后按每个步骤调用它们，我就是这样做的。

在 For 循环中调用 get JSON 函数时出错

Error Call for get JSON Function Within For Loop

javascript

for-loop

getjson