我想获取 firebase 中的项目列表，但项目的每个元素都有一个相关项目的列表。我无法获得列表，也没有使用 firebase-util也不是 firebase 数组 $extend功能。

我的 firebase 数据看起来像这样:

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/..."

我只想获取包含所有数据的项目列表。像这样的东西:

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/..."

这看起来像是一个相当常见的用例，但我被困在这里了。我试过this解决方案(两种方式)，但我无法让它工作。数据结构也有点不同，因为我需要关联另一个列表中的列表。

最佳答案

目标是显示一个项目列表。

每个项目都有一个图像列表。

最初，显示项目列表和每个项目的图像之一。

建议的方法:

要填充项目列表及其初始缩略图，我们需要有一个单独的节点，我们从中提取初始设置。

更新的项目节点

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 节点填充列表。

该节点很浅，包含 Firebase item_id、项目名称(如果需要)、从中获取初始图像缩略图的链接以及 Firebase 中主图像的 link_to。

例如:如果用户点击项目 2 的缩略图，则可以通过 .value at 的 observeSingleEvent 加载项目详细信息

/items/item_id_xx/images/image3

您可以通过向 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 中复制数据是一个正常的过程，并且受到鼓励:它使结构更平坦，并使查询和处理数据的速度更快。

有关更多阅读，请参阅 Denormalizing Data Keeps Your Breath Minty Fresh

关于javascript - 在 firebase 数组中检索项目列表的相关项目列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36941734/