显示从火力数据库检索信息的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表格

回答

相关问题