Question

我正在尝试在freecodecamp上完成一个twitch api项目。我最初调用了update(user)函数，我想使用forloop将数组lis中的内容附加到ul，如下所示：

for(let i=0; i< lis.length; i++){
            $('ul').append(lis[i]);
            console.log(i) 
        }

但是，forloop不会执行。有人能告诉我出了什么问题吗？

let users =["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
let lis = [];
$(document).ready(()=>{
    users.forEach((user)=>{
        update(user);
    });
    // the loop won't excute at all?
    for(let i=0; i< lis.length; i++){
        $('ul').append(lis[i]);
        console.log(i) 
    }
});

function update(user){
    let content = $(".list-template").clone();
    // content.find(".status").text("OFFLINE");
    $.ajax({
        type:'GET',
        url:"https://wind-bow.glitch.me/twitch-api/streams/"+user,
        success:(res)=>{
            //if success update content given username;
            if(res.stream){
                content.addClass("w3-light-green");
                content.find(".userName").text(user);
                content.find(".status").text(" is playing: " + res.stream.game);
                let description= res.stream.channel.status;
                content.find(".description").text(description);
                content.find(".profile-img").attr("src",res.stream.preview.small);
                content.find("a").attr("href",res.stream.channel.url)
            }
            else{
                content.find(".userName").text(user + " currently is offline");
            }
            content.css("display","block");
            if(res.stream){
                lis.unshift(content);
            }
            lis.push(content);
        },
        error:(res)=>{
            console.log("error");
        }
    });
    
    
}

h1{
    color: white;
}
.channel{
    margin-top:75px;
}
.list-template{
    display:none;
}
.profile-img{
    width:85px;
}
.status{
    font-style: italic;
}
.description{
    color:black;
    font-style: italic;
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="main.css">
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
    <header class='w3-top w3-container w3-cyan'>
        <div class='w3-bar'>
            <h1>Twitch TV Station</h1>
        </div>
    </header>
    <div class='w3-container channel'>
        <div class="w3-row">
          <div class="w3-quarter w3-container">
              </div>
             <ul class="w3-ul w3-card-4 w3-margin-top w3-blue-grey">
                 <li class="w3-bar list-template">
                     <div class='w3-container w3-bar-item w3-hide-small w3-cell'>
                         <img class="profile-img w3-round">
                     </div>
                    <div class="w3-bar-item w3-cell">
                        <span><a class="w3-large"><span class='userName'></span><span class='status'></span></a></span><br>
                        <span class="description"></span>
                    </div>
                </li>
              </ul>
    </div>
</body>
<script type="text/javascript" src="twitch.js"></script>
</html>

函数update（）完成后忽略forloop

0 个答案: