从 Firebase 中检索网站的嵌套数据答案

【问题标题】：Retrieving Nested Data from Firebase for a Website从 Firebase 中检索网站的嵌套数据
【发布时间】：2018-11-19 00:50:37
【问题描述】：

This is how my html looks like

<!DOCTYPE html>
<html>
<head>
<title>Pet Article</title>

<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>

</head>



<body>

	
	<img src = "cat.jpg" width = 700px , height = "500px" />
	<img src = "dog.jpg" width = 700px , height = "500px" />

	<p>This is the paragraph <br /> Need more?</p>
	<hr />
	
	<h1 id="big0ne" ></h1>	
	
	<script>
  // Initialize Firebase
  var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);
  
		var big0ne = document.getElementById('big0ne');
		var dbRef = firebase.database().ref().child('text');
		dbRef.on('value', snap => big0ne.innerText = snap.val());
			
</script>
	
</body>
</html>

我是编程新手，这是我第一次在这里问，所以请多多包涵。

我们被要求使用 firebase 数据库创建一个项目并将其连接到我们的网站以检索数据。我在 youtube 和 Internet 上找到了教程，但是我似乎找不到适用于在 firebase 上检索嵌套值的教程。它将数据返回为 [对象对象]

我想知道如何在 firebase 中检索嵌套数据。我会附上我的数据库的样子。这是我的html代码。我没有制作单独的 javascript 文件。我只是将javascript代码放在“脚本”标签中，因为它无论如何都可以工作。出于安全原因，我会故意删除 API 密钥等。

【问题讨论】：

请不要在答案中添加问题详细信息，请为此编辑您的问题。
对此感到抱歉。我已经编辑了我的帖子。
不是一个答案，而是一个快速提醒，共享 Firebase 配置数据不一定存在安全风险。见stackoverflow.com/questions/37482366/…

标签： javascript html web firebase-realtime-database

【解决方案1】：

您现在可以从 Firbase 读取以下代码：

var dbRef = firebase.database().ref().child('text');
dbRef.on('value', snap => big0ne.innerText = snap.val());

这会读取text 节点的值，然后您使用val() 获取它的值。查看你分享的 JSON 截图，text 的值为：

{
  "text2": "Wonder Pets"
}

这本身就是一个 JavaScript 对象，所以如果你在它上面调用toString()（你的代码会隐式调用）你会得到"[object Object]"（或者它的一些变体，取决于浏览器）。

要获取text2子节点的值，你应该使用：

big0ne.innerText = snap.child("text2").val()

所以在上面一行中，我们取了快照的text2 子节点，然后是它的值，这正是你想要的字符串。

【讨论】：

非常感谢这个工作。例如，如果 text2 有另一个子节点，我该怎么办？例如“text>text2>text3 : Wonder Pets”...等等？基本上我在问如果我需要更多嵌套数据（例如“文本 4 或文本 5”），我将使用什么。
snap.child("text2").child("text3").val() 或 snap.child("text2/text3").val() 等