Fatal编程技术网
  • javascript/
  • Javascript 如何在html标记中创建循环以显示数据库中的所有JSON子字段？

Javascript 如何在html标记中创建循环以显示数据库中的所有JSON子字段？

javascript html firebase

Javascript 如何在html标记中创建循环以显示数据库中的所有JSON子字段？,javascript,html,firebase,firebase-realtime-database,Javascript,Html,Firebase,Firebase Realtime Database,我正在开发一个连接到Firebase数据库的调查应用程序。作为参考，firebase数据库使用JSON结构。以下是我的数据库片段： 我在控制台中显示了正确的子项（问题），但我只能在html标题中显示一次值。标题不会循环并显示HTML页面上的每个问题，尽管我可以在控制台中看到它们。这就是我需要你帮助的地方。我不知道如何循环HTML标记来显示数据。我在互联网上搜索了一段时间，但没有找到正确的解决方案。以下是我目前拥有的代码： <!DOCTYPE html> <html> &

我正在开发一个连接到Firebase数据库的调查应用程序。作为参考，firebase数据库使用JSON结构。以下是我的数据库片段：

我在控制台中显示了正确的子项（问题），但我只能在html标题中显示一次值。标题不会循环并显示HTML页面上的每个问题，尽管我可以在控制台中看到它们。这就是我需要你帮助的地方。我不知道如何循环HTML标记来显示数据。我在互联网上搜索了一段时间，但没有找到正确的解决方案。以下是我目前拥有的代码：

<!DOCTYPE html>
<html>
<head>
<title>DAILY SURVEY REMINDER</title>

</head>
<body>

<div>

<h id = questions> </h1>

</div>




</body>


<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"> . 
</script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase- 
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase- 
auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase- 
database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase- 
firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase- 
messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase- 
functions.js"></script>
<script>

// Initialize Firebase

var config = {
apiKey: "AIzaSyCOUA9eYXRgrStbMXx-bcE2lR7e5IYjP2g",
authDomain: "testingdb-a8cd7.firebaseapp.com",
databaseURL: "https://testingdb-a8cd7.firebaseio.com",
projectId: "testingdb-a8cd7",
storageBucket: "testingdb-a8cd7.appspot.com",
messagingSenderId: "384953133465"
};
firebase.initializeApp(config);
</script>
<script src = "https://code.jquery.com/jquery-3.1.0.js"></script>

<script>
var question = document.getElementById('questions');
window.onload = function getData(){
for(  i = 1; i < 35; i++){

var dbRef = firebase.database().ref('Questions/'+i).child('questions');
dbRef.on('value', snap => { question.innerText = 
JSON.stringify(snap.val(), null, 3);
console.log(snap.val());
question = snap.val();
});
}

};




</script>

</html>


每日统计调查提醒
. 
//初始化Firebase
变量配置={
apiKey:“AIzaSyCOUA9eYXRgrStbMXx-bcE2lR7e5IYjP2g”，
authDomain:“testingdb-a8cd7.firebaseapp.com”，
数据库URL:“https://testingdb-a8cd7.firebaseio.com",
项目D：“测试DB-a8cd7”，
storageBucket:“testingdb-a8cd7.appspot.com”，
messagingSenderId：“384953133465”
};
firebase.initializeApp（配置）；
var question=document.getElementById（'questions'）；
window.onload=函数getData（）{
对于（i=1；i<35；i++）{
var dbRef=firebase.database（）.ref（'Questions/'+i）.child（'Questions'）；
dbRef.on（'value'，snap=>{question.innerText=
stringify（snap.val（），null，3）；
console.log（snap.val（））；
question=snap.val（）；
});
}
};
将逻辑替换为：

dbRef.on('value', snap => { 
    question.insertAdjacentHTML('beforeend', '<p>' + snap.val() + '</p>');
});

dbRef.on（'value'，snap=>{
insertAdjacentHTML（'beforeend'，''+snap.val（）+'
'）；
});
请尝试一下，并让我们知道。

每次当前加载问题时，您都会运行以下代码：

question = snap.val();
这意味着您每次都要用最新的问题替换
questions
元素，这解释了为什么最后只看到最后一个问题

如果您有一个问题列表，最好使用一个包含列表的元素，例如有序列表（
）。然后，对于每个问题，您在问题中插入一个附加的

    • HMTL元素：

    <ol id="questions"> </ol>
    非常感谢你。我终于明白snap=>是如何工作的了。你的解释很好。我确实需要在整个列表之间迭代，但是对于每个问题，我要么有多项选择答案，要么有一个文本框。多项选择题也需要从firebase中提取。这些将在一个新的词根“答案”下。你能指导我如何最好地做到这一点吗？如果他们遵循相同的方法，那么实际上只是更多地使用相同类型的代码。但我有一种感觉，您正在学习如何操作HTML，以及如何同时从Firebase读取。最好一次只关注一件事：要么从Firebase读取并将其注销到控制台（使用
    console.log（…）
    ），要么对JavaScript文件中的JSON进行硬编码，并关注如何从中生成HTML元素。您还会发现，为每个单独的部分查找教程要比为组合查找教程容易得多。谢谢。是的，你是对的，很难找到这两方面的教程。而且，刚刚运行了代码，它仍然以相同的方式工作。控制台记录正确的问题，但html只显示一个问题。我的代码不会将任何内容记录到控制台，也不应该覆盖html。您可能需要再次检查是否正确复制了它。我还建议学习每一行并了解其中的每一个通话。例如。我尽量减少了我使用的方法的数量，正是为了让它尽可能容易地遵循。 
    var question = document.getElementById('questions');
var dbRef = firebase.database().ref('Questions');
window.onload = function getData(){
  for(i = 1; i < 35; i++) {
    dbRef.child(i+'/questions').once('value', snap => { 
      var li = document.createElement("li");
      li.innerText = snap.val();
      question.appendChild(li);
    });
  }
};

    var question = document.getElementById('questions');
var dbRef = firebase.database().ref('Questions');
window.onload = function getData(){
  dbRef.on('child_added', snap => { 
    var li = document.createElement("li");
    li.innerText = snap.val().questions;
    question.appendChild(li);
  });
};