顯示從火力數據庫檢索信息的HTML表格

我是新來的火力地堡，並試圖從我的火力地堡數據庫檢索靜態信息，HTML以表格格式顯示顯示從火力數據庫檢索信息的HTML表格

的HTML代碼，我擁有的是：

<section> 
    <table> 
    <tr> 
     <th>Number scenario card</th> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    </table> 
</section>

和JavaScript是

var elements = document.getElementsByTagName('td'); 
    // Loop through each tag and place a card in HTML 
    for(var i = 0; i < elements.length; i++){ 
     // Generate a random number 
     var rndWCard = "/card" + Math.floor((Math.random() * 6) + 1); 
     // Get a database reference to our cards with random number appended to end of path 
     var ref = new Firebase("https://&&**((.firebaseio.com/whiteCards" + rndWCard); 
     // Attach an asynchronous callback to read the card data from database 
     ref.on("value", function(snapshot) { 
     // Print to console for development purposes 
     console.log(snapshot.val()); 
     // Assign card to each element in the table 
     elements[i].innerHTML = snapshot.val(); 
     }, 
     function (errorObject) { // Deal with errors 
      console.log("The read failed: " + errorObject.code); 
     });    
    }

但我得到的錯誤：

TypeError: undefined is not an object (evaluating 'elements[i].innerHTML = snapshot.val()')

我猜這是因爲我正在返回一個對象，並試圖在表中顯示該對象，但並不完全確定，因爲我是新來的，正如我所說的。

任何幫助將不勝感激感謝

來源

2016-03-05 Michael Heneghan

當您使用.value時，您將返回指定節點上所有內容的快照。因此，例如，如果您有一個包含所有用戶數據的用戶節點，則該快照將包含用戶節點中的每個用戶。同樣，如果您在/ card10節點上使用.value，則會返回節點中的所有內容。如果它是一個單一的字符串，那就沒問題。但是，如果有任何子節點，則需要將其從快照中提取出來。無論哪種方式，在您的問題中包含Firebase數據結構的小型文本副本是一個不錯的主意。（Firebase儀表板 - >導出）。 – Jay

使用此代碼：

ref.on("value", function(element) { 
    return function (snapshot) { 
     console.log(snapshot.val()); 
     element.innerHTML = snapshot.val(); 
    } 
}(elements[i]), 
function (errorObject) { // Deal with errors 
    console.log("The read failed: " + errorObject.code); 
});

在for循環變量i的結束等於elements.length，當在ref被觸發value事件您嘗試得到elements[i]元素，但實際上你得到elements[elements.length]這就是undefined。

ref.on("value", function(element) { 
    return function (snapshot) { 
     element.innerHTML = snapshot.val(); 
     console.log(element); 
    } 
}(elements[i]), 
function (errorObject) { // Deal with errors 
    console.log("The read failed: " + errorObject.code); 
});

來源

2016-03-05 17:06:46

非常感謝您的迅速響應，我給了您積極的反饋，但沒有足夠的聲望去做其他事情。我實現了你的代碼並運行它。我在控制檯上沒有收到任何錯誤，但由於某種原因沒有數據填充表格。 –

對你感到高興:) –

你知道爲什麼數據沒有顯示在表格中嗎？ –

顯示從火力數據庫檢索信息的HTML表格

回答

相關問題