How can i print multiple json object data using firebase snapshot - data pull succeded

Question

I got this working so far.

Data pulled to console from snapshot :

{34FrUM8777N6i0IWfqsatdMc29g1: {…}, 3DSOrtpBHlYENn14bE9UJKWly4G3: {…}}
3DSOrtpBHlYENn14bE9UJKWly4G3:
-MH8EpUbn1Eu3LdT0Tj0: {code: "https://www.apesyntax.com", content: "This is the tut content", date: "2020-09-13", email: "test", first: "tester guy", …}
-MH8TRc3NfinUtI-XORZ: {code: "https://www.codepen.io/apesyntax/pen/ExKNawv", content: "asdad asd asd a", date: "2020-09-13", email: "test@tester", first: "tester", …}
__proto__: Object
34FrUM8777N6i0IWfqsatdMc29g1:
-MH9rJPyKpgKm7HnulTZ: {code: "https://www.codepen.io", content: "Tutorial content from the second tutroial posted by this author. ", date: "2020-09-13", email: "[email protected]", first: "ape ", …}
-MH49Fad5NKD9awjQzVF: {code: "https://www.codepen.io/apesyntax/pen/ExKNawv", content: "new tutorial testing data fetching", date: "2020-09-12", email: "[email protected]", first: "apesyntax", …}
__proto__: Object

So far I managed to pull the data in the order I want to paste them but how can I paste this data to my view?

here is my complete code:

<template>
  <v-container id="my-tutorials">
      <h1>All Tutorials</h1>
           <!-- loop over the tutorials -->
           <div v-for="(tutorial, key) in allTutorials" :key="key">
           <h2>{{ user.uid.title }}</h2>
           <p>{{ tutorial.content }}</p>
           <!-- and so on -->
     </div>
  </v-container>
</template>

<script>

import firebase from '../plugins/firebase'
import vue from 'vue'

let db = firebase.database();
//let usersRef = db.ref('users');
let tutRef = db.ref('tutorials');

export default {
  name: 'TutShow',
  data() {
      return {
          authUser: {},
          allTutorials: {}
      }
  },
  methods: {
  },
  created: function() {
    data => console.log(data.user, data.credential.accessToken)
    firebase.auth().onAuthStateChanged(user => {
        this.authUser = user
        if (user) {
          tutRef.once('value', snapshot => {
            snapshot.val()
            console.log(snapshot.val())
            if (snapshot.val()) {
            this.allTutorials = snapshot.forEach(this.allTutorials)
            vue.set( 'allTutorials', this.allTutorials )
             }
          });
        }

     })
   }
}
</script>

here is my result:

But I can't get to print on my screen in all tutorials data yet:

Any hints?

Answer 1

You've got a couple of syntax and logical errors in your value handler.

What you want to do (I think) is flat-map all the nested documents into one array or object.

I'd go for an array like this

data: () => ({
  authUser: null,
  allTutorials: [] // initialise an array
})

and in your value handler

tutRef.once('value', snapshot => {
  const val = snapshot.val()
  if (val) {
    this.allTutorials = Object.values(val).flatMap(tutes =>
      Object.entries(tutes).map(([ _key, tutorial ]) => ({ _key, ...tutorial })))
  }
})

Then in your template, you can use this

<div v-for="tutorial in allTutorials" :key="tutorial._key">
  <h1>{{ tutorial.title }}</h2> <!-- 👈 just guessing on this one -->
  <p>{{ tutorial.content }}</p>
</div>