检索一个火力点阵列
我想在火力的项目清单,但该项目的每一个元素都有相关的项目列表中的项目清单的相关项目列表。我一直无法获取该列表,既没有使用firebase-util也没有使用firebase数组$extend的功能。检索一个火力点阵列
我的火力点的数据看起来是这样的:
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: "[email protected]"
user2
name: "User 2"
email: "[email protected]"
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/..."
而我只是想获得项目列表的所有数据。例如:
items
item1
name: "Item 1"
user
name: "User 1"
email: "[email protected]"
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: "[email protected]"
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: "[email protected]"
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/..."
它看起来像一个相当常见的用例,但我被卡住了。我试过this解决方案(两种方式),但我无法得到它的工作。数据结构也有点不同,因为我需要关联另一个列表中的列表。
感谢@Jay和@Eric的答案,他们非常有帮助,我的解决方案具有两者兼而有之。我会解释我怎么知道的。
首先,我已经改变了模式,并添加了一个新的项目的主要图片的关键。我叫它cover
。但回答原来的问题,我会加载所有的图像。因此,这里是新items
模式:
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
然后,我这是怎么弄(使用async库)上述名单。它可能是一个更好的方法来完成相同的:
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);
}
}
});
});
});
}
,这将输出类似:
item1
name: "Item 1"
cover:
image: "data:image/jpeg;base64,/9j/..."
thumb: "data:image/jpeg;base64,/9j/..."
user
name: "User 1"
email: "[email protected]"
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: "[email protected]"
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: "[email protected]"
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"
当应用程序启动时,填充来自items_list_for_ui节点的列表。
节点较浅,包含了火力地堡ITEM_ID,项目名称(如果需要),该链接以获得从最初的图像的缩略图,并在火力地堡主图像的的link_to。
例如:如果用户点击缩略图就第2项,项目详细信息可通过observeSingleEvent与.value的所加载
/项目/ item_id_xx /图片/图像3
你可以阐述这个通过增加比方说,一个侧翻链接item_list_for_ui
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"
这种结构是非常灵活的,你可以变出你想要的只是更新这些相应的子节点在主列表中显示哪些拇指和翻车。
这也是有效的,因为它避免了加载数百个项目和数百子图像节点 - 加载所有这些节点和子节点会超载UI(在某些情况下)。
在这种结构中,item_list_for_ui是紧凑,因此即使有几百个项目,这是该数据的一小部分。
你可能对自己说“自我,这就是重复数据”。是的,并且在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
});
}
这应该产生这样看对象的数组:
{
name: "Item 1",
user: {
name: "User 1",
email: "[email protected]"
},
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/..."
}]
}
非常感谢@Eric N,你的答案是有用的,我想达到 – cor
正因为如此,你不能检索你所要求的基础上,格式的数据的目前的结构。你能提供关于你为什么想一次获得所有这些数据的信息吗?通常情况下,您会得到一个用户名列表,或者与第3项一起使用但通常不是一次的图像列表。我认为可能有解决您的问题和理解用例会有所帮助。 – Jay
@Jay我想显示一个项目列表。每个项目都有一个图像列表,但我只是将其中一个显示在列表中作为该项目的主要图片。为什么不,也许在鼠标悬停,我想改变到另一个。但至少如果我能做到这一点,它会很好。 – cor