Javascript 如何在firebase数据库——Webapp中检索多级数据

Javascript 如何在firebase数据库——Webapp中检索多级数据,javascript,html,firebase,firebase-realtime-database,web-applications,Javascript,Html,Firebase,Firebase Realtime Database,Web Applications,我是firebase的新手,我正在尝试创建一个壁纸应用程序。我想从数据库中检索如下所示的数据。 。但这不仅仅是两个层次。我想展示男孩组和女孩组的详细信息,但不想展示他们的名字。我想表现得像这样 如果我不添加级别boygroup和girlgroup,我可以做我想做的事情,但我需要这些类别。这是三个级别的值,如何一次性检索男孩组和女孩组的孩子让我感到困惑。 这是两级儿童的代码。。请帮帮我 var dbCategories = firebase.database().ref("categories

我是firebase的新手,我正在尝试创建一个壁纸应用程序。我想从数据库中检索如下所示的数据。

。但这不仅仅是两个层次。我想展示男孩组和女孩组的详细信息,但不想展示他们的名字。我想表现得像这样

如果我不添加级别boygroup和girlgroup,我可以做我想做的事情,但我需要这些类别。这是三个级别的值,如何一次性检索男孩组和女孩组的孩子让我感到困惑。 这是两级儿童的代码。。请帮帮我

var dbCategories = firebase.database().ref("categories");
    dbCategories.on("value",function(categories){`


        if (categories.exists()) {
            var categorieshtml = "";

            categories.forEach( function(category) {
                // statements

                var newCategory =category.val();
                console.log(category);
                categorieshtml += "<tr>";

                //for category name 
                categorieshtml += "<td>";
                categorieshtml += category.key;
                console.log(categorieshtml);
                categorieshtml += "</td>";

                //for category Description

                categorieshtml += "<td>";
                categorieshtml += category.val().desc;
                console.log(categorieshtml);

                categorieshtml += "</td>";              

                //for category Thumbnail

                categorieshtml += "<td> <img width='250' height='150' src='";
                categorieshtml += category.val().thumbnail;
                categorieshtml += "'/></td>";
                categorieshtml += "</tr>";

            }); 

            $("#categories").html(categorieshtml);
        }
var dbCategories=firebase.database().ref(“categories”);
dbCategories.on(“值”,函数(类别){`
if(categories.exists()){
var categorieshtml=“”;
类别。forEach(功能(类别){
//声明
var newCategory=category.val();
控制台日志(类别);
categorieshtml+=“”;
//对于类别名称
categorieshtml+=“”;
categorieshtml+=category.key;
console.log(categorieshtml);
categorieshtml+=“”;
//用于类别描述
categorieshtml+=“”;
categorieshtml+=category.val().desc;
console.log(categorieshtml);
categorieshtml+=“”;
//对于类别缩略图
categorieshtml+=“”;
categorieshtml+=“”;
}); 
$(#categories”).html(categorieshtml);
}

以下是您可以做的

const dbCatagoriesRef = firebase.database.ref('categories')
dbCatagoriesRef.on('value', snapshot => {
    const dbCatagories = snapshot.val();
    const bodyGroupCategory = dbCatagories.bodygroup;
    const girlGroupCategory = dbCatagories.girlgroup;

    // es6
    Object.values(bodyGroupCategory).forEach(wallpapper) {
        // Do with what is needed with the wallpapper
        console.log(wallpapper.thubmnail)
    }

    // can also do the same to girlGroupCategory 
})

然而,当你这样做的时候…你不应该这样做…你应该只监听你能监听的最小树上的更改…监听树顶部位置(文档/对象)上的值或其他firebase更改这将给数据库带来更大的压力,而且由于数据负载高,这甚至会使整个firebase数据库陷入困境。

您好,谢谢!我想在网页上显示这两个类别的详细信息。我是否应该删除子类别男孩组和女孩组,以减少数据库的压力?是的,出于许多原因,您应该这样做……1)你为firebase支付带宽,你不想加载不需要的数据2)将firebase附加到一个包含许多嵌套子项的大型文档上会导致应用程序性能缓慢3)如果你在文档的根目录上附加一个侦听器,并且那里有很多数据,firebase可能会被卡住你的申请书tionhttps://firebase.google.com/docs/database/web/read-and-write 您可以在这里阅读firebase推荐