CODEWITHSUNDEEP
javascriptfirebasegoogle-cloud-firestore
Robin Lange
Robin Lange

Reputation: 13

Vue.js Firebase .get not returning expected data

So I'm attempting to pull data from a Firebase database.

Rules are currently set to allow read/write. My function is called in the created lifecycle hook and looks as follows: 

db.collection("todos")
      .get()
      .then((snapshot) => {
        snapshot.forEach((element) => {
          console.log(snapshot);
          console.log(element);
        });
      });

My firebase config file looks as follows:

//import firebase from "firebase";
const firebase = require("firebase/app");
// eslint-disable-next-line no-unused-vars
import "firebase/firestore";

// firebase config
var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

// Initialize Firebase
// eslint-disable-next-line
const firestore = firebase.initializeApp(config);
const db = firebase.firestore();
export default db;

However instead of returning objects from the database in the format I expect it returns this:

Object { iE: {…}, kc: {…}, _E: {…}, lE: false, dE: false, rE: undefined }

But what I'm expecting is something that looks like this: Screenshot from a tutorial video

Apologies the last code is a screenshot but it's from a video guide I'm following. Where am I going wrong here? Did Firebase recently update and I need to be doing something different?

Upvotes: 1

Views: 90

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598708

It looks like the object in your case was minified, while in the tutorial it wasn't. That should matter for the functionality of the object though, as long as you stick to calling methods/properties that are declared on the QuerySnapshot object and the QueryDocumentSnapshot object.

For example, to see the number of query results and the data of each document, you'd do:

db.collection("todos")
  .get()
  .then((snapshot) => {
    console.log(snapshot.size);
    snapshot.forEach((doc) => {
      console.log(doc.data());
    });
  });

Upvotes: 1

Related Questions