如何在html標記中創建一個循環以顯示數據庫中的所有JSON子字段？

Question

我正在研究連接到Firebase數據庫的調查應用程序。 作為參考，firebase數據庫使用JSON結構。 以下是我的數據庫片段：

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>

Answer 1

如何將邏輯替換為：

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

請嘗試，讓我們知道。

Answer 2

每次您當前加載問題時，都可以使用以下代碼運行此代碼：

question = snap.val();

這意味着您每次都用最新的問題替換questions元素，這解釋了為什么最后只看到最后一個問題。

如果您有問題列表，則最好使用旨在包含列表的元素，例如有序列表（ <ol> ）。 然后對於每個問題，在該問題中插入一個附加的<li> 。

HMTL元素：

<ol id="questions"> </ol>

然后是代碼：

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);
    });
  }
};

如果您想顯示所有問題而不是只顯示前35個問題，則只需讓Firebase為所有子節點呼叫您：

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);
  });
};

如何在html標記中創建一個循環以顯示數據庫中的所有JSON子字段？

問題描述

2 個解決方案

解決方案1
1 2018-04-02 00:03:44

解決方案2
0 已采納 2018-04-02 01:39:56

如何在html標記中創建一個循環以顯示數據庫中的所有JSON子字段？

問題描述

2 個解決方案

解決方案1 1 2018-04-02 00:03:44

解決方案2 0 已采納 2018-04-02 01:39:56

解決方案1
1 2018-04-02 00:03:44

解決方案2
0 已采納 2018-04-02 01:39:56