[FIXED] How to retrive the data from a nasted JSON FireBase Database using Vue.js?

Issue

I have one problem and cannot retrive the data from my FireBase database using Vue.js.

I want to retrive specific field message and timestamp. Moreover, name and email of userModel. By knowing that, I believe I could figure it out how to retrive other too.

I have done successfull with simple database.

But, after I tried to do it on my real database with nasted code using v-for and keys, it was unsuccessfull because I do not know the exact code to write inside the <script> tag.

Moreover, I believe this can be done with a loop, foreach and then have to concatenate to get the correct data from the field in JSON tree like the stated below?

Knowing the FireBase config, all is good setup. I can login to my call it "Dashboard". On the dashboard, I would like to only get and display the data in the HTML <table> tag.

My JSON looks like this:

{
  "chatmodel" : {
    "-LeZnCBPC7FvqMeIfw_Y" : {
      "file" : {
        "name_file" : "some_file.jpg",
        "size_file" : "5332138",
        "type" : "img",
        "url_file" : "https://firebasestorage.googleapis.com/v0/b/xmnovimarof.appspot.com/o/images%2F2019-05-11_045028camera.jpg_camera?alt=media&token=5e13c9be-b6a5-43cb-a4ed-725148d8d3de"
      },
      "message" : "",
      "timeStamp" : "1557543050279",
      "userModel" : {
        "email" : "user@gmail.com",
        "id" : "pQe9H83cxDd8hFu6bFzzt7M5YT12",
        "name" : "First Last Name",
        "phoneNumber" : "+385123456789",
        "photo_profile" : "https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
      }
    },
    "-LeZnGUXcNhSYzZeGJWk" : {
      "mapModel" : {
        "latitude" : "46.31",
        "longitude" : "16.33"
      },
      "timeStamp" : "1557543067886",
      "userModel" : {
        "email" : "user@gmail.com",
        "id" : "pQe9H83cxDd8hFu6bFzzt7M5YT12",
        "name" : "First Last Name",
        "phoneNumber" : "+385123456789",
        "photo_profile" : "https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
      }
    },
    "-LeZnNJL27r5NHB8gYzt" : {
      "message" : "This is a text test message.",
      "timeStamp" : "1557543095843",
      "userModel" : {
        "email" : "user@gmail.com",
        "id" : "pQe9H83cxDd8hFu6bFzzt7M5YT12",
        "name" : "First Last Name",
        "phoneNumber" : "+385123456789",
        "photo_profile" : "https://lh4.googleusercontent.com/-Tf1LtwPEmHI/AAAAAAAAAAI/AAAAAAAANnw/fEXJ05bKSPc/s96-c/photo.jpg"
      }
    }
  }
}

I am a bit of confused which code should I use inside my <template> and <script> tag.

I only need to get the data from this kind database (it has more items like that). I do not need to edit or delete it.

Thank you for any advance and provided help.

Solution

One common way is to fetch the database in the created hook of your component, see https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

You will find below the code for a simple example based on a standard Vue.js set-up. Update the firebaseConfig.js file with yoru own project configuration.

main.js

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

    <template>
      <div id="app">
        <HelloWorld/>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld";
    
    export default {
      name: "App",
      components: {
        HelloWorld
      }
    };
    </script>
    
    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

components/HelloWorld.vue

<template>
  <div class="hello">
    <div v-if="chatItems.length">
      <div v-for="ci in chatItems">
        <h4>{{ ci.messageDate }}</h4>
        <p>{{ ci.userName }} - {{ ci.messageText}}</p>
        <hr>
      </div>
    </div>
    <div v-else>
      <p>There are currently no posts</p>
    </div>
  </div>
</template>

<script>
import { db } from "../firebaseConfig.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      chatItems: []
    };
  },
  created() {
    db.ref("chatmodel")
      .once("value")
      .then(dataSnapshot => {
        const itemsArray = [];
        dataSnapshot.forEach(childSnapshot => {
          const childData = childSnapshot.val();
          itemsArray.push({
            messageText: childData.message,
            userName: childData.userModel.name,
            messageDate: childData.timeStamp
          });
        });
        this.chatItems = itemsArray;
      });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

firebaseConfig.js

import firebase from "firebase";

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "xxxxxxx",
  authDomain: "xxxxxxx",
  databaseURL: "xxxxxxx",
  projectId: "xxxxxxx",
  storageBucket: "xxxxxxx",
  messagingSenderId: "xxxxxxx",
  appId: "xxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const db = firebase.database();

export { db };

Answered By - Renaud Tarnec

Answer Checked By - Gilberto Lyons (PHPFixing Admin)