Append data from firestore to an array in javascript

Question

I'm playing with firebase right now, and I want to get display posts from the database. I've got an array of objects, but I don't know how to get the data into the array. This is my code:

import * as firebase from "firebase/app";
import db from "@/plugins/firebase";
export default {
  data() {
    return {
      posts: []
    };
  },
  methods: {
    get() {
      db.collection("posts")
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            this.posts = doc.data();
            console.log(this.posts);
          });
        })
        .catch(err => {
          console.log("Error getting documents", err);
        });
    }
  }
};

I think you don't need forEach the snapshot.data() should be an array of objects — ambianBeing
– ambianBeing, Commented Oct 30, 2019 at 11:13

Filip · Accepted Answer · 2019-10-30 11:48:26Z

1

Figured it out, turns out I had to create a new object and then use the spread operator.

This is the working code:

    get() {
      db.collection("posts")
        .get()
        .then(snapshot => {
          let items;
          snapshot.forEach(doc => {
            this.posts.push({
              ...doc.data()
            });
          });
        })
        .catch(err => {
          console.log("Error getting documents", err);
        });
    }

answered Oct 30, 2019 at 11:48

Filip

9656 gold badges20 silver badges45 bronze badges

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

Comments

shaykoo · Accepted Answer · 2019-10-30 11:12:40Z

0

Try using

.then(snapshot => {
          snapshot.forEach(doc => {
            this.posts.push(doc.data());
          });

All you need is to use push() method so that the data coming from Firebase will get into the array defined above.

answered Oct 30, 2019 at 11:12

shaykoo

612 silver badges13 bronze badges

3 Comments

Filip Over a year ago

I have tried this, but this.posts is now an observer. When I loop through the posts it does display the correct number of posts, but doesn't display the data, like post title etc. console.log(this.posts) returns this -> imgur.com/a/pNnl0eN

shaykoo Over a year ago

Maybe with the use of map() operator the data would get transformed into JSON object and then using the subcsribe() method you can display the object data easily.

Filip Over a year ago

I used JSON.stringify(doc.data()) If I try using .map() it says snapsot.map() is not a function

Justice47 · Accepted Answer · 2019-10-30 11:25:27Z

0

If @shaykoo is getting the idea of your question right then you must use reactive variation of push() method like this:

.then(snapshot => {
          snapshot.forEach((doc,i)=> {
            this.$set(this.posts, i, doc.data());
          });

answered Oct 30, 2019 at 11:25

Justice47

7137 silver badges17 bronze badges

1 Comment

Justice47 Over a year ago

Any errors in console? What is console.log(snapshot.data()) output?

Collectives™ on Stack Overflow

Append data from firestore to an array in javascript

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related