Javascript 检索firebase数组中项目列表的相关项目列表
我想在firebase中获得一个项目列表,但该项目的每个元素都有一个相关项目列表。我无法获取列表,无论是使用还是firebase阵列功能 我的firebase数据如下所示:Javascript 检索firebase数组中项目列表的相关项目列表,javascript,angularjs,firebase,angularfire,firebase-util,Javascript,Angularjs,Firebase,Angularfire,Firebase Util,我想在firebase中获得一个项目列表,但该项目的每个元素都有一个相关项目列表。我无法获取列表,无论是使用还是firebase阵列功能 我的firebase数据如下所示: items item1 name: "Item 1" user: user1 images image1: true image2: true item2 name: "Item 2"
items
item1
name: "Item 1"
user: user1
images
image1: true
image2: true
item2
name: "Item 2"
user: user1
images:
image3: true
image4: true
item3
name: "Item 3"
user: user2
images:
image5: true
image6: true
users
user1
name: "User 1"
email: "user1@email.com"
user2
name: "User 2"
email: "user2@email.com"
images
image1
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image2
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image3
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image4
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image5
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
{
name: "Item 1",
user: {
name: "User 1",
email: "user1@email.com"
},
images: [{
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
},{
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
}]
}
我只想得到一个包含所有数据的项目列表。比如:
items
item1
name: "Item 1"
user
name: "User 1"
email: "user1@email.com"
images
image1
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image2
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item2
name: "Item 2"
user
name: "User 1"
email: "user1@email.com"
images
image3
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image4
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item3
name: "Item 3"
user
name: "User 2"
email: "user2@email.com"
images
image5
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image6
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item1
name: "Item 1"
cover:
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
user
name: "User 1"
email: "user1@email.com"
images
image1
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image2
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item2
name: "Item 2"
cover:
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
user
name: "User 1"
email: "user1@email.com"
images
image3
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image4
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item3
name: "Item 3"
cover:
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
user
name: "User 2"
email: "user2@email.com"
images
image5
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image6
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
它看起来像是一个相当常见的用例,但我在这里被绊住了。我尝试了解决方案(两种方式),但都没能奏效。数据结构也有点不同,因为我需要关联另一个列表中的列表。目标是显示项目列表 每个项目都有一个图像列表 最初,显示项目列表和每个项目的一个图像 建议的办法: 要填充项目列表及其初始缩略图,我们需要有一个单独的节点,从中提取初始设置 更新项目节点
items:
item_id_xx: //this should be a Firebase generated node name
name: "Item 2"
user: "uid_for_user_1"
images:
image3: "data:image/jpeg;base64,/9j/..."
image4: "data:image/jpeg;base64,/9j/..."
以下是用于主列表的节点,用户可以在其中单击项目拇指以获取更多详细信息:
item_list_for_ui
random_node_0
item_id: "item_id_aa"
name: "Item 1" //if you want to display the name in the list
initial_thumb: "data:image/jpeg;base64,/9j/..." //initial thumb
link_to: "image1"
random_node_1
item_id: "item_id_xx"
name: "Item 2"
initial_thumb: "data:image/jpeg;base64,/9j/..."
link_to: "image3"
random_node_2
item_id: "item_id_qq"
name: "Item 3"
initial_thumb: "data:image/jpeg;base64,/9j/..."
link_to: "image1"
当应用程序启动时,从“项目列表”节点为“用户界面”节点填充列表
该节点为浅节点,包含Firebase项目id、项目名称(如果需要)、获取初始图像缩略图的链接以及Firebase中主图像的链接
例如:如果用户单击项目2的缩略图,则可以通过observeSingleEvent加载项目详细信息,其.value位于
/items/item_id_xx/images/image3
您可以通过添加一个滚动链接来解释这一点
random_node_1
item_id: "item_id_xx"
name: "Item 2"
initial_thumb: "data:image/jpeg;base64,/9j/..."
thumb_link: "image3"
rollover_thumb: "external link to rollover"
rollover_link: "image4"
这种结构非常灵活,只需更新相应的子节点,即可更改要在主列表中显示的thumb和Rollover
它也很有效,因为它避免了加载数百个项目和数百个子图像节点——加载所有这些节点和子节点会使ui过载(在某些情况下)
通过这种结构,ui的项目列表非常紧凑,因此即使有数百个项目,它也是该数据的一小部分
你可能在对自己说‘self,那是重复的数据’。是的,在Firebase中复制数据是一个正常的过程,并受到鼓励:它使结构更平坦,使查询和处理数据的速度更快
有关更多信息,请参见如果您拥有所有可用数据,您可以循环浏览图像,并将其元数据用作数据库其余部分中的键
var itemsArr = [];
for(var i in items) {
var item = items[i];
var images = [];
for(var image in item[images]) {
item.push(images[image]);
}
itemsArr.push({
name: item.name,
user: users[item.user],
images: images
});
}
这将产生一组如下所示的对象:
items
item1
name: "Item 1"
user: user1
images
image1: true
image2: true
item2
name: "Item 2"
user: user1
images:
image3: true
image4: true
item3
name: "Item 3"
user: user2
images:
image5: true
image6: true
users
user1
name: "User 1"
email: "user1@email.com"
user2
name: "User 2"
email: "user2@email.com"
images
image1
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image2
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image3
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image4
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image5
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
{
name: "Item 1",
user: {
name: "User 1",
email: "user1@email.com"
},
images: [{
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
},{
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
}]
}
感谢@Jay和@Eric的回答,他们非常有帮助,我的解决方案两者兼而有之。我会解释我是怎么弄明白的 首先,我更改了模式,并为项目的主图片添加了一个新键。我把它叫做封面。但是回答最初的问题,我会加载所有的图片。下面是新的
项目
模式:
items
item1
name: "Item 1"
user: user1
cover: image1
images
image1: true
image2: true
item2
name: "Item 2"
user: user1
cover: image3
images:
image3: true
image4: true
item3
name: "Item 3"
user: user2
cover: image5
images:
image5: true
image6: true
然后,这就是我如何得到上面提到的列表(使用库)。这可能是实现同样目标的更好方法:
getItems: function(cb){
var items = ref.child("items");
items.on("value", function(snapshot){
var item_length = snapshot.numChildren(),
final_items = [],
readed = 0;
ref.child("items").on("child_added", function(item){
var item_id = item.key(),
itemData = item.val(),
user = ref.child("users").child(itemData.user),
cover = ref.child("images").child(itemData.cover),
images = new Firebase.util.NormalizedCollection(
[ref.child("items").child(item_id).child("images"),'alertImages'],
ref.child('images')
).select('images.image','images.thumb').ref();
async.parallel([
function(callback){
user.on("value", function(user_snap){
callback(null, user_snap.val());
});
},
function(callback){
images.on("value", function(images_snap){
callback(null, images_snap.val());
});
},
function(callback){
cover.on("value", function(cover_snap){
callback(null, cover_snap.val());
});
}
], function(err, results){
if(!!err){
cb(err,null)
}else{
itemData.user = results[0];
itemData.images = results[1];
itemData.cover = results[2];
final_items.push(itemData);
readed += 1;
if(readed === item_length){
cb(null,final_items);
}
}
});
});
});
}
这将输出如下内容:
items
item1
name: "Item 1"
user
name: "User 1"
email: "user1@email.com"
images
image1
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image2
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item2
name: "Item 2"
user
name: "User 1"
email: "user1@email.com"
images
image3
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image4
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item3
name: "Item 3"
user
name: "User 2"
email: "user2@email.com"
images
image5
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image6
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item1
name: "Item 1"
cover:
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
user
name: "User 1"
email: "user1@email.com"
images
image1
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image2
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item2
name: "Item 2"
cover:
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
user
name: "User 1"
email: "user1@email.com"
images
image3
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image4
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
item3
name: "Item 3"
cover:
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
user
name: "User 2"
email: "user2@email.com"
images
image5
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
image6
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
事实上,您无法根据当前结构检索所需格式的数据。您能否提供有关为什么要一次获取所有这些数据的信息?通常情况下,您会得到一个用户名列表,或者一个与第3项相关的图像列表,但通常不是一次全部。我想你的问题可能有一个解决方案,理解用例会有所帮助。@Jay我想展示一个项目列表。每个项目都有一个图像列表,但我将仅在列表中显示其中一个作为项目的主图片。为什么不呢,也许在鼠标上,我想换另一个。但至少如果我能用一个就好了。谢谢你的回答@Jay。但是,您将如何加入数据?你会使用
firebase util
插件吗?如果是,怎么做?我不知道如何建立关系,因为项目id为dynamic@corFirebase没有连接函数,因为它不是SQL。有许多方法可以关联数据,在Firebase中复制数据也可以。我想我的回答回答了你的直接问题。你的评论/跟进是一个很好的新问题(Stackoverflow上已经有了一些答案)。检查这些答案,如果你有一个具体的问题,张贴它@如果有帮助,接受答案!然后对代码进行一点检查,并查看有关在Firebase中关联(连接)数据的其他一些答案。如果你被卡住了,发布另一个问题,我们将尝试帮助你!我会投赞成票,但在悬赏期开放时我不会接受。这似乎是另一个更好的答案;)非常感谢@Eric N,你的回答对我想要实现的目标很有帮助,因为你有一个解决方案。注意其他异步调用中的那些异步调用。这可能会给你带来麻烦,所以我会经常检查你的数据,尤其是使用push()和在几个设备上测试,几乎同时读取/写入数据。感谢@Jay的建议,我在答案中寻找类似的代码,而不仅仅是关于代码结构。目前我还没有找到更好的。不过我会继续努力