javascript - Firebase - 使用回调在数组中检索和存储数据

Question

我想使用 Firebase 回调从实时数据库中检索数据，将其存储在数组中，然后将该数据用于数据可视化目的。但是当我记录数组的控制台时，它返回空。我引用了this post试图理解/修复我的错误，但我仍然遇到很多麻烦。

var genderData=[];
// Get counter values.
function getData(){
    var ref = firebase.database().ref().child('counters');

    return ref.once('value').then((snapshot) => {
        snapshot.forEach((element) => {
            genderData.push(element.val()['Male']);
        });
        return genderData;
    });
}

console.log(genderData);

我的控制台显示:

最终，我希望能够使用我的数组通过 Chart.js 库生成图表:

// Bar graph displaying the total number of students by gender.
var ctx = document.getElementById("myChart4").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Male", "Female", "Non-Binary", "Other", "Unspecified"],
        datasets: [{
            data: genderData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Total Students by Gender'
        },
        legend:{
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

我已经研究这个问题几个小时了，但没有解决。我想要的只是用我的数据库数据创建一个简单的数组，但我遇到了很多麻烦。我真的希望有人能帮助我找到一个优雅的解决方案。

编辑:

一些我的数据库结构，以防万一:

Answer 1

Firebase 异步加载数据。这意味着任何需要访问数据的代码都必须位于 then() 回调内部，或者必须使用自己的 then() 回调。

根据您当前的 getData 定义，您可以调用它并使用数据:

getData().then((data) => {
  console.log("In callback");
  console.log(data);
  console.log(genderData);
})
console.log("Outside callback");
console.log(genderData);

如果运行此代码，您将看到:

Outside callback

[]

Inside callback

[ item1, item2, ... ]

[ item1, item2, ... ]

这里需要注意的事项:

1. 外部回调代码在内部回调代码之前运行，这可能不是您所期望的。
2. 回调之外的代码运行，数组仍然为空。仅当回调内的代码运行后，数组才会包含数据。
3. 在回调中，genderData 和 data 是相同的。这是因为您在回调中返回enderData，然后该数据会冒泡到then() 方法。

最终的解决方案是，创建图表的代码(这是您需要数据的地方)应该位于 then 回调之一内部，以便数据加载后就会调用它。例如:

getData().then((data) => {
   var myChart = new Chart(ctx, {
     type: 'bar',
     data: {
        labels: ["Male", "Female", "Non-Binary", "Other", "Unspecified"],
        datasets: [{
            data: data,
            ...