Question

我想将所有json db条目渲染到浏览器上，但看起来它只提取最后一个条目。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Candidate Lookup Table </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  </head>

  <body>
    <div class="container">
      <h1 id="bigTextEvaluationStudents"></h1>
       <table class="table" id="table1" >
		<thead>
			<tr>
				<th>company </th>
				<th>email</th>
				<th>message </th>
				<th>name</th>
				<th>	phone </th>
				
			</tr>
		</thead>
		<tbody>
		</body>
	</table>
	<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
	<script type = "text/javascript" 
		src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
	</script>
	<script>
		// Initialize Firebase
		var config = {
		apiKey: "",
		authDomain: "",
		databaseURL: "",
		projectId: "",
		storageBucket: "",
		messagingSenderId: ""
		
	 };
	firebase.initializeApp(config);
	var database = firebase.database();
	var leadsRef = database.ref('messages');
	leadsRef.on('value', function(snapshot) {
	snapshot.forEach(function(childSnapshot) {
	var childData = childSnapshot.val();
	var obj = JSON.stringify(childData);
	$(function(){
		var jsonObj = $.parseJSON(JSON.stringify(childData));
		var html = '<table border="1">';
		console.log(obj);
		$.each(jsonObj, function(key, value){
			html += '<tr>';
			html += '<td>' + key + '</td>';
			html += '<td>' + value + '</td>';
			html += '</tr>'; });
			html += '</table>';
			$('div').html(html);
            });			
		});
	});
								
	</script>
    </div>
	</body>
</html>

我看到输出中只有一个条目，而数据库中有三个。

这是我看到的数据，而数据库中有四个条目。我如何获取所有条目？来自firebase的数据不会传递任何json验证器。

Answer 1

来自@kusuma的回答会起作用，但可以改进。首先，当您使用html时，不要使用像div这样的通用选择器来更好地使用id或类名。另一个改进是你如何追加数据，不只是改变整个div，它会弄乱你的UI显示。请检查以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Candidate Lookup Table </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  </head>

  <body>
    <div class="container">
      <h1 id="bigTextEvaluationStudents"></h1>
       <table class="table" id="table1" >
		<thead>
			<tr>
				<th>company </th>
				<th>email</th>
				<th>message </th>
				<th>name</th>
				<th>	phone </th>
				
			</tr>
		</thead>
		<tbody id='push_content'>
    </tbody>
    </table>
    </div>

	<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
	<script type = "text/javascript" 
		src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
	</script>
	<script>
		// Initialize Firebase
		var config = {
		apiKey: "AIzaSyAvSuAXxizKOPEB6QWxjPb0acN2t6l2oU8",
		authDomain: "jobrecuiters-9552a.firebaseapp.com",
		databaseURL: "https://jobrecuiters-9552a.firebaseio.com",
		projectId: "jobrecuiters-9552a",
		storageBucket: "jobrecuiters-9552a.appspot.com",
		messagingSenderId: "846593931464"
		
	 };
	firebase.initializeApp(config);
	var database = firebase.database();
	var leadsRef = database.ref('messages');
	leadsRef.on('value', function(snapshot) {
	snapshot.forEach(function(childSnapshot) {
	var childData = childSnapshot.val();
	var obj = JSON.stringify(childData);
	$(function(){
		var jsonObj = $.parseJSON(JSON.stringify(childData));
		var html = '';
		console.log(obj);
		$.each(jsonObj, function(key, value){
			html += '<tr>';
			html += '<td>' + key + '</td>';
			html += '<td>' + value + '</td>';
			html += '</tr>'; });
			
			$('#push_content').append(html);
            });			
		});
	});
								
	</script>
	</body>
</html>

注意：此代码只是您的改进版本，您遇到上述代码无法解决的配置问题。请检查并修复它并且不要在公开信息中发布apiKey等敏感信息

Answer 2

您正在使用.html（）循环设置HTML。这将覆盖前一个元素。

$('div').html(html);

您必须使用.append（）方法追加新元素。

$('div').append(html);

使用jQuery渲染所有记录

2 个答案: