html从数据库读取数组,如何从Firebase数据库中检索数据数组并使用结果填充HTML页面?...

我尝试从Firebase数据库生成一系列数据,并使用结果填充HTML页面。

这是我的数据库的布局:

MYAPP

|_______chat

|

|_______users

|_____2eD8O9j2w

| |____email

| |____first_name

| |____last_name

|

|_____7d73HR6d

|_____9ud973D6

|_____Kndu38d4

我希望能够得到所有"电子邮件"和" first_name" users中的字段,然后根据此数据自动创建和填充HTML列表。 (有点像创建一个联系人列表,每行会有两个div:

first_name
email
)

这是我目前尝试使用数据填充HTML页面:

HTML

(是否可以在Javascript中自动创建和填充这些行,而不是在HTML代码中创建空行?)

的Javascript

function createContactList(){

var elements = document.getElementsByTagName('td');

var contacts = [];

// Get a database reference to the users section

var ref = firebase.database().ref().child('/users');

ref.on("value", function(element) {

return function (snapshot) {

console.log(snapshot.val());

// Loop through each HTML tag

for(var i = 0; i < elements.length; i++){

element.innerHTML = snapshot.val();

var tester = snapshot.val();

console.log(tester.email); // This returns "undefined"

console.log(snapshot.val()); // This returns a list of User IDs

console.log(snapshot.val().email); // This returns "undefined"

console.log(snapshot.val(email)); // This shows the error: ``firebase Uncaught ReferenceError: email is not defined``

var createarraytest = snapshot.email;

contacts.push({email: createarraytest});

}

}(elements[i]),

function (errorObject) { // Deal with errors

console.log("The read failed: " + errorObject.code);

});

}

console.log(contacts);

}

当我运行此功能时,HTML页面上会显示以下列表:

[OBJECT OBJECT]

[OBJECT OBJECT]

[OBJECT OBJECT]

[OBJECT OBJECT]

[OBJECT OBJECT]

console.log(snapshot.val());显示随机用户ID的列表。在尝试访问每个ID的email和first_name数据时,我尝试了以下操作:

var tester = snapshot.val();

console.log(tester.email); // This returns "undefined"

console.log(snapshot.val().email); // This returns "undefined"

console.log(snapshot.val(email)); // This shows the error: ``firebase Uncaught ReferenceError: email is not defined``

我以前在Javascript中使用数组和SQL数据库,但我不知道如何访问Firebase在这个noSQL数据库中创建的随机用户ID字符串中包含的数据。

任何帮助实现这一目标的工作都将非常感谢,提前谢谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值