Vue, firebase database return the empty array

Question

I am trying to retrieve the data from firebase database.

And I can connect to firebase auth and check currentUser data, it's fine.
But I can't retrieve the data from firebase database, it just return the empty array.

firebase version = 5.0.4
vue version = 2.5.16

The database structure

users/     
--------uId/        
--------------name    
--------------email

Vue Js folder structure

App.vue    
firebase.js    
main.js     
components /     
------------ Home.vue

firebase.js

var firebase = require('firebase');
require("firebase/auth");     
require("firebase/database");

var config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "..."
};
firebase.initializeApp(config)
export const auth = firebase.auth();
export const db = firebase.database()

Home.vue

<script>
import {db} from './../firebase';
import {auth} from './../firebase';
var usersRef = db.ref('users');

export default {
    name: "Home",
    components: {
        add_new
    },
    data(){
        return {}
    },
    mounted: function(){
        console.log(usersRef);
        var userId = auth.currentUser.uid;
        return db.ref('/users/' + userId).once('value').then(function(snapshot) {
            snapshot.forEach(function (childData) {
                console.log(childData.val())
            })
        })
    }
}
</script>

Here, Vue app works correctly,
only the firebase.database ( usersRef ) returns the empty array.

This is the screenshot of console.log(usersRef) result
https://i.sstatic.net/NH7gh.png

You are sure that userId has the right value? Because nowhere in your code appears the login part. If you do console.log(userId) do you get the correct value? — Renaud Tarnec
– Renaud Tarnec, Commented Jun 10, 2018 at 10:18
Yes I got the correct value such as "jzeagloTU8Qjpfxo....", And I open the database for both read and write. — Poe Eain
– Poe Eain, Commented Jun 10, 2018 at 10:33

wobsoriano · Accepted Answer · 2018-06-10 10:17:20Z

1

First instead of using multiple import statements, why not

import {auth, db} from './../firebase';

And try to change

snapshot.forEach(function (childData) {
   console.log(childData.val())
})

to snapshot.val()

var userId = auth.currentUser.uid;
return db.ref('/users/' + userId).once('value').then(function(snapshot) {
   console.log(snapshot.val());
});

answered Jun 10, 2018 at 10:17

wobsoriano

13.5k25 gold badges106 silver badges180 bronze badges

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

3 Comments

Poe Eain Over a year ago

Sorry @FewFlyBy, I tried the same as your answer like console.log(snapshot.val()); , but it returns null.

wobsoriano Over a year ago

do you get the value of userId when you console log it?

Poe Eain Over a year ago

Thanks @FewFlyBy, it was my mistakes, I logged in with a wrong user that has no data.

Collectives™ on Stack Overflow

Vue, firebase database return the empty array

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