Dynamically populate array with Firebase Data Vue.js

Question

I am using Vue.js with Chart.js in order to retrieve some data from Firebase and display it on a chart. This is my code:

import {Line} from 'vue-chartjs'

let Firebase = require('firebase');
//
let config = {
    apiKey: '****************************',
    authDomain: '****************************',
    databaseURL: '****************************',
    storageBucket: '****************************'
};

let firebaseApp = Firebase.initializeApp(config);
let db = firebaseApp.database();
let schools = db.ref('schools');

export default Line.extend({
    firebase: {
        schoolsArray: schools
    },
    data(){
        alert('data');
        return {
            names: []
        }
    },
    computed: {
        schoolNames: function () {
            for (let item of this.schoolsArray) {
                this.names.push(item.name);
            }
            alert('computed');
            return this.names
        }
    },

    mounted () {
        alert('mounted');
        this.renderChart({
            labels: this.names.toString(),
            datasets: [{
                label: 'School Reports', backgroundColor: '#dd4935',
                data: [10, 20, 50, 12, 34, 43, 45]
            }]
        }, {responsive: true, maintainAspectRatio: true})
    }
})

The problem is that the names array are always empty and the labels are not displayed. Here is how it looks:

I need to display the school names on the x axis!

On the picture below is the Vue.js debugger results:

mbehzad · Accepted Answer · 2017-08-30 11:10:06Z

2

db.ref('school') returns a 'firebase.database.Reference' object you have to retrieve the data from it. you could add this to your vue mounted lifecycle hook:

db.ref('school').once('value')
 .then((dataSnapshot) => {
   this.schoolsArray = dataSnapshot.val();
 });

you could also use the .on method which will automatically fire your callback each time when the data changes on the server. so make sure you remove that when the component is destroyed. for documentation see: https://firebase.google.com/docs/reference/js/firebase.database.Reference#once

edited Aug 30, 2017 at 11:10

answered Aug 30, 2017 at 10:33

mbehzad

3,8983 gold badges24 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vasco Over a year ago

I have posted one more picture which shows that the names are retrieved but are not shown on the graph!

mbehzad Over a year ago

does it help if you invoke your renderChart method in the .once callback again?

Vasco Over a year ago

yes I use this code into the methods lifecycle hook and call it inside mounted before the renderChart but still I can't see any labels o my chart

Collectives™ on Stack Overflow

Dynamically populate array with Firebase Data Vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related