通过从循环中删除我拥有的函数，我在重新格式化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等帮助下等......
我将上述代码放入www.jshint.com，并给出了以下结果：
三个警告“：
如何重新格式化我的代码（第11行）以包含我的get JSON函数，但是没有它在循环中？
答案 0 :(得分：0)
您在语法，拼写错误，错误的函数名称以及异步调用的延迟返回的占位符使用错误方面存在大量错误。错误摘要如下。同时，运行代码以确保它确实有效。
$(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 = twitchTvStreamers[i];
getjSON拼写为getJSON - 案件无关紧要！
ch.Display_name无法正常工作，因为返回的对象键拼写为display_name。再次注意你的情况。
$('#offline').append('<div class="TV-screen">'); - 这只会在<div>元素中添加空白#offline。您还希望在此处包含一些频道指定信息。
而且，最重要的是，您必须完全理解JS Promise的工作原理。我读到的最后一个最好的资源是Kyle Simpson的Asynch & Performance书，来自他的你不了解JS 系列。 jQuery＆＃39; s getJSON使用Promise接口，因此了解底层技术肯定有帮助。
简而言之 - 当你制作asynch call时，响应需要一段时间才能完成，同时其他代码也会执行。例如，您有一个名为status的变量，并且您正在为Twitch通道 foo 和 bar 的状态进行API调用。在API响应返回之前，您的代码已在页面上打印出<div id="foo">和<div id="bar">。然后状态返回，频道 foo 的状态返回在线，并将status变量设置为＆＃39; online＆＃39;。然后， bar 的状态将返回＆＃39; offline＆＃39;并将status变量设置为离线。而且，如果处理不当，JS会返回最后一个值（离线），它适用于所有元素。
您必须能够进行调用并将其结果保证为正确的DOM元素。我这样做了：
这里生成和附加DOM元素的顺序不会超出制作AJAX调用和获取结果的顺序。最简单的方法是将这个序列分解为单独的函数并按每个步骤调用它们，我做了。
答案 1 :(得分：-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是什么。我猜它的流名称，所以我把它添加到：
for loop以避免第一个问题