Global variable from one function to another

Question

In this file, I'm trying to send values taken from my Firebase Cloud, and display them on a chart, on another function. The problem is, I'm not able to get those values on the other function, already tried to make the variables global, but won't work. I've read multiple threads about sending variables from one function to another in javascript but everything I did ended up not working, the console log in the second function is always runChart: => undefined undefined undefined (Aswell as the chart not displaying correctly, missing bars). What am I doing wrong? Tried for example the simple solutions like on this thread, and nothing.

var a, b, c;
function getFirebase() {

        db.collection('metas').doc('meta1097').get().then(function (doc) {
            console.log('Document: ', ' => ', doc.get('jan'));
            a= doc.get('jan');
        });

        db.collection('metas').doc('meta1200').get().then(function (doc) {
            console.log('Document: ', ' => ', doc.get('jan'));
            b= doc.get('jan');
        });

        db.collection('metas').doc('meta1440').get().then(function (doc) {
            c= doc.get('jan');
            console.log('Document: ', ' => ', c); //Just to make sure doc.get can be assigned without error to a var
        });
        runChart();
    }

    function runChart() {
  var d = a;
  var e = b;
  var f = c;
        console.log('runChart: ', ' => ', d, e,f);
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [d, 19, 3, e, f, 3],
                    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: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    }

Please look into this once: [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — palaѕн, Feb 28 '20 at 13:08
`a`, `b`, `c` will get populated ***sometime later***, when the database call has finished. You'll want to look into `Promise.all` to await the completion of all three promises. — deceze, Feb 28 '20 at 13:09
To break it down. Your db querys will go into the callstack so they will be executed later. This means that runChart will be executed before the callback function inside the "then" will be executed. It is possible to use async/await or promises (with then method) . — KingKabyle, Feb 28 '20 at 13:13
I imagined they were being processed at different times, being that javascript execution is different, but I think I focused on the wrong matter. Thanks all for the infos, will be sure to keep studying everything. — , Feb 28 '20 at 13:59

score 0 · Accepted Answer · answered Feb 28 '20 at 13:19

The problem is all the tree calls to db are async, which means runChart will be executed before the response to those call is assigned to the variables. by making use of async/await you can achieve what you are looking for, see code below

var a, b, c;

async function getFirebase() {

  let doc = await db.collection('metas').doc('meta1097').get()
  a = doc.get("jan");
  
  doc = await db.collection('metas').doc('meta1200').get()
  b = doc.get("jan")

  doc = await db.collection('metas').doc('meta1440').get()
  c = doc.get("jan")
  runChart();
}

function runChart() {
  var d = a;
  var e = b;
  var f = c;
  console.log('runChart: ', ' => ', d, e, f);
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [d, 19, 3, e, f, 3],
        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: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
}

Global variable from one function to another

1 Answers1