javascript - 如何将Firebase数据显示在屏幕上

标签 javascript html firebase

在屏幕上显示从 Firebase 提取的数据的最佳方式是什么? 最好的方式是,我想要最好的方式来使用 JavaScript,而不是 hack 或 JSON.strinifying(除非这是最好的方式)。

我没有包含任何代码或尝试的原因是因为我想知道要做什么而不是如何做。欢迎任何提示

最佳答案

根据您想要绑定(bind)到屏幕的数据量,我建议使用某种框架。

如果使用 vanilla JS 完成,将 JSON 响应绑定(bind)到 View 并将其拆分以将其绑定(bind)到不同的元素可能会变得非常乏味。

对于一个简单的实现,像 jQuery 这样的东西应该足够了。

通常,这在一定程度上取决于您想要显示的 Firebase 回复内容。

如果是整个响应符号 JSON.stringify 可能是可行的方法。但通常您会希望显示保存在 JSON 响应属性中的信息。

因此假设这是您的响应数据:

{
  property: 'Example sting I want to display'
}

因此,您将获得 Firebase 响应(假设您已将响应对象保存到 data 变量中),选择要显示的属性值并将其传递给 jQuery 的 .text() 函数。

jQuery('#exampleDiv').find('p').text(data.property);

这假设您有一个示例 DOM,其中包含一个 id 为“exampleDiv”且包含 p 标签的 div。

此 p 标签现在将包含字符串“我想要显示的示例刺痛”。

这种方式可以轻松扩展到多个属性和不同的 html 标签,让您可以自由选择在 JSOn 响应中绑定(bind)哪个部分。

关于javascript - 如何将Firebase数据显示在屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39453239/

相关文章:

javascript - 未捕获( promise )TypeError : Cannot read property 'buildFromTemplate' of undefined at HTMLButtonElement. getVideoSources

javascript - 根据键值的存在从数组中删除元素

javascript - 解析具有内联事件处理程序的 HTML

css - iPad Safari 滚动会导致 HTML 元素消失并延迟重新出现

angular - forkJoin 不适用于 AngularFire2 valueChanges

javascript - 当所有内容在浏览器窗口中可见时,如何使 div 更改为固定位置?

javascript - Bootstrap 3 菜单,一个可以切换选项卡并打开下拉菜单的按钮?

javascript - 在 IE11 和 Edge 中单击时向 DOM 元素添加类时出现问题

firebase - 在 Vue.js 中使用 Firebase auth/login 时,Firebase 的回调如何在 Vue 应用程序中设置数据?

android - 将 Google 项目迁移到 Firebase 控制台