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);

如果运行此代码，则会看到：

外部回调

[]

内部回调

[item1，item2，...]

[item1，item2，...]

这里要注意的事情：

Outside callback代码在Inside callback代码之前运行，这可能不是您期望的。
回调之外的代码运行，该数组仍然为空。仅在回调内的代码运行后，数组才会包含数据。
在回调内部，genderData和data是相同的。这是因为您在回调中return genderData，然后将其冒泡到then()方法。

为您提供的最终解决方案是，创建图表（需要数据的位置）的代码应该位于{em {em} 中，其中then回调之一才能被调用数据加载后。例如：

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

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

1 个答案: