2016-07-01 32 views
0

您好您的每一個記錄陣列,控制檯怪異的行爲 - 當網頁加載首次只

我在一個簡單的項目工作,和JavaScript的工作是:

  1. 獲取數據從twitch(使用jsonp)多次使用for循環,添加必要的html並將其推送到數組。
  2. 當循環完成我想要添加到網站上的陣列中的所有預先佈置的HTML,再次使用循環(有3人 - 因爲有三個陣列)這樣的下面):

    for (var i = 0; i < newItemBoxOn.length; i++) { 
    $("#container").append(newItemBoxOn[i]); 
        } 
    

但它沒有奏效。所以我試圖console.log所有三個數組。 我注意到控制檯的不同行爲,當我加載整個網站(這裏是我得到的): enter image description here

正如你看到的,有這三個陣列控制檯。但是,當我刷新網站時,我得到了三個空的(!)數組。

enter image description here

1.爲什麼會這樣? 2.如何正確地將數組的值附加到網站上?

鏈接codepen:https://codepen.io/RycerzPegaza/pen/AXRdGa

在看好,謝謝你這麼多好的建議,我希望我所描述的問題以及

+1

'的console.log()'調用是的'$ .getJSON()'調用之外; '.getJSON()'異步返回結果 – guest271314

+1

這是因爲$ .getJson是一個異步操作。當您的頁面首次加載時,您的console.logs將首先被打印。 – Vatsal

+0

因此,我不能將屬性值存儲在外部,並將它們追加到$ .getJSON()之外的網站中?現在我知道那個控制檯。日誌將無法捕捉它,但對我來說這裏重要的是 - 我不知道如何將這些東西附加到HTML正確 – Sebastian

回答

0

$(document).ready(function() { 
 
    var link = "https://api.twitch.tv/kraken/streams/"; 
 
    var channelsArr = ["ESL_SC2", "OgamingSC2", "comster404", "cretetion", "freecodecamp", "brunofin", "storbeck", "sheevergaming", "RobotCaleb", "noobs2ninjas", "terakilobyte", "syndicate", "pewdiepie", "riotgames"]; 
 
    var newItemBoxClosed = []; 
 
    var newItemBoxOn = []; 
 
    var newItemBoxOff = []; 
 
    for (var i = 0; i < channelsArr.length; i++) { 
 
     var currentLink = link + channelsArr[i] + "?callback=?"; 
 
     $.getJSON(currentLink, function(data) { 
 
      // do something with the data; 
 
      if (data.status === 422) { 
 
      newItemBoxClosed.push("<div class='item-box'><ul><li><div class='profile-img'><div class='cross'></div><img src=''></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'></div><div class='userstatus'>channel closed</div></div>"); 
 
      } 
 
      // item-box massive production 
 
      else { 
 
      $.getJSON(data["_links"].channel + "?callback=?", function(channelData) { 
 
       // if data.stream === null - there's no streaming 
 
       if (data.stream === null) { 
 
        newItemBoxOff.push("<div class='item-box'><ul><li><div class='profile-img'><img src='" + channelData.logo + "'></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'>" + channelData.display_name + "</div><div class='userstatus'>offline</div></div>"); 
 
       } 
 
       // if data.stream !== null - stream is live 
 
       else { 
 
        newItemBoxOn.push("<div class='item-box'><ul><li><div class='profile-img'><img src='" + channelData.logo + "'></div></li><li><div class='status-light' id='light-green'><p>on</p></div></li></ul><div class='reflection'></div><div class='username'>" + channelData.display_name + "</div><div class='userstatus'>" + channelData.game + ": " + channelData.status + "</div></div>"); 
 
       } 
 
       newItemBoxOn.forEach(function(item) { 
 
        $(container).append($(item)); 
 
       }); 
 

 
       }) // end inner json 
 
      } 
 
     }) // end getJSON 
 
    } // end for loop 
 

 
    }) // end ready
/* colorset: 
 
grey - #D1D1D1; 
 
purple - #6441A5; 
 
*/ 
 

 
/*don't know if media queries needed if i have flexbox */ 
 

 
#container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    height: 99%; 
 
} 
 
@media screen and (max-width: 570px) { 
 
    #switch { 
 
    transform: translateX(5%); 
 
    } 
 
} 
 
/* fonts */ 
 

 
body { 
 
    background-color: #D1D1D1; 
 
    font-family: 'Dosis', sans-serif; 
 
    color: #6441A5; 
 
} 
 
#header { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    height: 35px; 
 
    margin: 6px 0 15px; 
 
    padding: 0; 
 
} 
 
#switch { 
 
    height: 36px; 
 
    width: 100px; 
 
    position: relative; 
 
    padding: 0px 5px; 
 
    transform: translate(24%, 6%); 
 
    font-family: 'Bungee Shade'; 
 
    font-size: 0.77em; 
 
    text-align: center; 
 
    line-height: 35px; 
 
    font-weight: bold; 
 
    color: #444; 
 
} 
 
#switch-on, 
 
#switch-on:active { 
 
    width: 48%; 
 
    height: 100%; 
 
    background: #44C947; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    box-shadow: 2px 2px 1px #555; 
 
} 
 
#switch-on:active { 
 
    background: #33B836; 
 
    transform: translate(2%, 4%); 
 
    box-shadow: 0 1px #999; 
 
} 
 
#switch-off, 
 
#switch-off:active { 
 
    width: 48%; 
 
    height: 100%; 
 
    background: #E02443; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    box-shadow: 2px 2px 1px #555; 
 
} 
 
#switch-off:active { 
 
    background: #D01332; 
 
    transform: translate(2%, 4%); 
 
    box-shadow: 0 1px #999; 
 
} 
 
#title-bar { 
 
    width: 329px; 
 
    height: 35px; 
 
    border: 2px solid purple; 
 
    margin: 1px auto 4px; 
 
    transform: translateX(-1px); 
 
    -webkit-box-shadow: 2px 2px 2px #888; 
 
    -moz-box-shadow: 2px 2px 2px #888; 
 
    box-shadow: 2px 2px 2px #888; 
 
    position: relative; 
 
} 
 
.item-box { 
 
    width: 160px; 
 
    height: 250px; 
 
    border: 2px solid purple; 
 
    margin-right: 2px; 
 
    margin-bottom: 4px; 
 
    -webkit-box-shadow: 4px 5px 3px -1px rgba(0, 0, 0, 0.3); 
 
    -moz-box-shadow: 4px 5px 3px -1px rgba(0, 0, 0, 0.3); 
 
    box-shadow: 4px 5px 3px -1px rgba(0, 0, 0, 0.3); 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
} 
 
.profile-img { 
 
    -webkit-clip-path: polygon(25% 0%, 50% 2%, 75% 15%, 95% 50%, 82% 80%, 70% 90%, 25% 93%, 4% 60%, 5% 37%); 
 
    background: rgba(0, 0, 0, 0.4); 
 
    background-size: 50px 50px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 1px auto; 
 
    transform: translate(-10px, -10px); 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
.status-light { 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 100%; 
 
    transform: translate(95px, 1px); 
 
    box-shadow: 0px 0px 1px rgba(10, 10, 10, 0.8); 
 
} 
 
p { 
 
    font-size: 0.62em; 
 
    line-height: 32px; 
 
    transform: translate(-4px, 2px); 
 
    font-family: 'Bungee Shade'; 
 
} 
 
#light-red { 
 
    background: #E02443; 
 
} 
 
#light-green { 
 
    background: #44C947; 
 
} 
 
.username, 
 
.userstatus { 
 
    display: block; 
 
    width: 90%; 
 
    margin: 1px auto; 
 
    color: #6441A5; 
 
    font-size: 1em; 
 
    -webkit-transform: translate(0px, 78px); 
 
    padding: 2px 0px; 
 
    text-align: center; 
 
} 
 
.reflection { 
 
    position: absolute; 
 
    -webkit-clip-path: polygon(25% 10%, 50% 2%, 75% 15%, 95% 50%, 82% 80%, 70% 70%, 75% 100%, 10% 79%, 5% 75%, 2% 60%, 4% 72%, 0% 45%, 0% 40%, 4% 34%); 
 
    height: 300px; 
 
    width: 300px; 
 
    background: rgba(100, 65, 165, 0.12); 
 
    transform: translate(0px, -50px); 
 
} 
 
.username { 
 
    border: 1px solid #6441A5; 
 
} 
 
.userstatus { 
 
    font-size: 0.9em; 
 
    font-weight: bold; 
 
    margin: 5px auto; 
 
} 
 
img { 
 
    width: inherit; 
 
    height: inherit; 
 
    box-shadow: 1px 2px 5px black; 
 
} 
 
h1 { 
 
    font-family: 'Bungee Shade'; 
 
    font-size: 1.4em; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    transform: translateY(-13px); 
 
} 
 
/*** red cros ***/ 
 

 
.cross { 
 
    position: absolute; 
 
    right: 68px; 
 
    opacity: 1; 
 
} 
 
.cross:before, 
 
.cross:after { 
 
    position: absolute; 
 
    left: 15px; 
 
    content: ' '; 
 
    height: 105px; 
 
    width: 2px; 
 
    background-color: #E02443; 
 
} 
 
.cross:before { 
 
    transform: rotate(45deg); 
 
} 
 
.cross:after { 
 
    transform: rotate(-45deg); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="header"> 
 
    <div id="switch"> 
 
     <div id="switch-on">on</div> 
 
     <div id="switch-off">off</div> 
 
    </div> 
 
    <div id="title-bar"> 
 
     <h1>twitch observer</h1> 
 
    </div> 
 
    </div> 
 
    <div id="container"> 
 
    <!-- container start --> 
 

 

 
    </div> 
 
    <!-- container end --> 
 
</body>

你這樣做異步調用Web服務。這正是爲什麼第二個JSON調用嵌套在第一個JSON調用中的原因。我改變你的JavaScript的console.log()電話裏面放置,然後獲得大量有效的HTML的,與此類似:

["<div class='item-box'><ul><li><div class='profile-…div class='userstatus'>channel closed</div></div>", "<div class='item-box'><ul><li><div class='profile-…div class='userstatus'>channel closed</div></div>"] 
0 
: 
"<div class='item-box'><ul><li><div class='profile-img'><div class='cross'></div><img src=''></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'></div><div class='userstatus'>channel closed</div></div>" 
1 
: 
"<div class='item-box'><ul><li><div class='profile-img'><div class='cross'></div><img src=''></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'></div><div class='userstatus'>channel closed</div></div>" 
length 
: 
2 

編輯: 要實際插入HTML放入容器div,你會遍歷內部數組第二JSON呼叫:

newItemBoxOn.forEach(function (item) { 
    $(container).append($(item)); 
}); 
+0

我也可以看到這些數組元素,但它是可能的將這些值附加到HTML $ .getJSON之外?因爲我試圖循環它並追加每一個數組元素,但我不能 – Sebastian

+1

這是行不通的,因爲代碼不是順序的。你需要在內部調用的回調函數中追加它。 –

+0

@塞巴斯蒂安我編輯了我的答案,包括工作片段。 –

0

的一種方法代$.when().then()Function.prototype.apply()for循環

$(document).ready(function() { 
    var link = "https://api.twitch.tv/kraken/streams/"; 
    var channelsArr = ["ESL_SC2", "OgamingSC2", "comster404", "cretetion", "freecodecamp", "brunofin", "storbeck", "sheevergaming", "RobotCaleb", "noobs2ninjas", "terakilobyte", "syndicate", "pewdiepie", "riotgames"]; 
    var newItemBoxClosed = []; 
    var newItemBoxOn = []; 
    var newItemBoxOff = []; 
    var dfd = new $.Deferred(); 
    // for (var i = 0; i < channelsArr.length; i++) { 
    $.when.apply($, $.map(channelsArr, function(_, i) { 
     var currentLink = link + channelsArr[i] + "?callback=?"; 
     return $.getJSON(currentLink, function(data) { 
      // do something with the data; 
      if (data.status === 422) { 
      newItemBoxClosed.push("<div class='item-box'><ul><li><div class='profile-img'><div class='cross'></div><img src=''></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'></div><div class='userstatus'>channel closed</div></div>"); 
      } 
      // item-box massive production 
      else { 
      return $.getJSON(data["_links"].channel + "?callback=?", function(channelData) { 
       // if data.stream === null - there's no streaming 
       if (data.stream === null) { 
        newItemBoxOff.push("<div class='item-box'><ul><li><div class='profile-img'><img src='" + channelData.logo + "'></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'>" + channelData.display_name + "</div><div class='userstatus'>offline</div></div>"); 
       } 
       // if data.stream !== null - stream is live 
       else { 
        newItemBoxOn.push("<div class='item-box'><ul><li><div class='profile-img'><img src='" + channelData.logo + "'></div></li><li><div class='status-light' id='light-green'><p>on</p></div></li></ul><div class='reflection'></div><div class='username'>" + channelData.display_name + "</div><div class='userstatus'>" + channelData.game + ": " + channelData.status + "</div></div>"); 
       } 

       }) // end inner json 
      } 
     }) 
     // end getJSON 
    })) // end for loop 
    .then(function(data) { 
     $("body").append(newItemBoxOn, newItemBoxOff, newItemBoxClosed) 
    }) 
    }) // end ready 

plnkr https://plnkr.co/edit/hlquTnwurSuN2SxnT0UI?p=preview

+0

你的版本以某種方式多次添加相同的值(你可以在你的plnkr中看到它,多次看看相同的頭像)。我嘗試這樣做:\t \t如果(ⅰ===(channelsArr.length-1)) \t { \t \t爲(VAR J = 0;Ĵ Sebastian

+0

@Sebastian見更新後 – guest271314

+0

我看,但是。它僅加載數組「newItemBoxClosed」中的值。最肯定的是它是唯一不包含任何ajax數據的數組。我嘗試了一個小時來解決它,但沒有成功。我不能讓它顯示所有三個數組。 – Sebastian