JS for循環不工作

我有一個for循環看起來像這樣：JS for循環不工作

for (var i = 0; i < list.length; i++) {

它是通過數據庫中的數據火力地堡循環和數據庫返回的所有數據。

但是，我希望它只能達到前10個數據庫項目。所以我改變了環路：

for (var i = 0; i < 9; i++) {

但這無法顯示任何結果時，有不到10個數據的數據庫。但是，如果我將數字設置爲數據庫中包含的很多對象，例如10，因爲我有10個對象，則會將它們全部顯示出來。但是，任何少於這個數字，我只是得到一個空白的網頁。

這裏是網頁時，我有我的火力地堡數據庫10個對象：

在這裏，它是當我刪除這些對象之一：

我有不知道爲什麼會發生這種情況 - 邏輯是正確的 - 如果我小於9，然後顯示數據 - 但相反，它只會顯示它，當它等於9時。

以下是完整的JS：

function refreshUI(list) { 
var lis = ''; 
var lis2 = ''; 
var lis3 = ''; 
var lis4 = ''; 
    for (var i = 0; i <= 9; i++) { 
     lis += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>'; 
     lis2 += genLinks(list[i].key, list[i].book) 
     }; 
     for (var i = 10; i < list.length; i++) { 
     lis3 += '<li data-key="' + list[i].key + '" onclick="addText(event)">' + list[i].book + '</li>'; 
     lis4 += genLinks(list[i].key, list[i].book) 
     }; 
     document.getElementById('bookList').innerHTML = lis; 
     document.getElementById('bookList2').innerHTML = lis2; 
     document.getElementById('bookList3').innerHTML = lis3; 
     document.getElementById('bookList4').innerHTML = lis4; 
    }; 

function genLinks(key, bkName) { 
var links = ''; 
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><img src="images/bin.png" style="width: 24px; height: 24px; transform: translateY(-7px); opacity: .4;"></img></a> '; 
return links; 
}; 

function del(key, bkName) { 
var response = confirm("Are certain about removing \"" + bkName + "\" from the list?"); 
    if (response == true) { 
     // build the FB endpoint to the item in movies collection 
     var deleteBookRef = buildEndPoint(key); 
     deleteBookRef.remove(); 
     } 
    } 

function buildEndPoint (key) { 
return new Firebase('https://project04-167712.firebaseio.com/books/' + key); 
} 
// this will get fired on inital load as well as when ever there is a change in the data 
bookList.on("value", function(snapshot) { 
var data = snapshot.val(); 
var list = []; 
    for (var key in data) { 
     if (data.hasOwnProperty(key)) { 
      book = data[key].book ? data[key].book : ''; 
     if (book.trim().length > 0) { 
      list.push({ 
      book: book, 
      key: key 
      }) 
     } 
    } 
} 
// refresh the UI 
refreshUI(list); 
});

如果有人有任何幫助，我不勝感激！

來源

2017-05-29 GeorgeBT

試試這個'pseudocode'：如果您的列表長度超過9更大然後取出僅有10元，如果不使用list.length作爲你的門檻（這樣你沒有索引超出範圍例外） – Hackerman

當列表大小小於10時，您將在循環中出現錯誤，因爲您最終將尋址list[i]（因爲它是undefined）上不存在的屬性（如key）。如果你想檢查控制檯，你會注意到這個錯誤被報告。

爲了解決這個問題，改變第一for循環的條件是這樣的：

for (var i = 0; i < Math.min(10, list.length); i++) {

這樣，循環將永遠不會重複，以不存在的條目。在9或之後停止，以先到者爲準。

或者，你可以把兩個條件與&&操作：

for (var i = 0; i < 10 && i < list.length; i++) {

來源

2017-05-29 21:43:21 trincot

感謝百萬！解決了！ – GeorgeBT

不客氣;-) – trincot

JS for循環不工作

回答

相關問題