Using Firebase Database (with Imported JSON file) in Ionic 3 - json

Question

I'm new to Firebase and I previously had a JSON file consisting of data I was using in my app, this JSON file was hosted on my own sever - and was working well with my app. Now I'd like to expand the app and try using Firebase to enhance it.
I've gone ahead and created a new account and all and imported my JSON file into firebase, now I'd like to know how I can possibly retrieve this data - I know that simply changing the path to my JSON file might not just be it! Can anyone assist?
Thanks & Regards...

Answer 1

I'm assuming you've already configured the Firebase in your project and installed it, if not just tell me and i'll update my answer.
If you've imported your JSON data into Firebase and you can see it under database on your console now all you'll need to do to read this data is a simple .once() or .on() (i'll explain the differences).
In the page you want to fetch data do this:
import * as firebase from 'firebase';
// LET'S SAY YOU WANT TO FETCH SOMETHING ON HOME PAGE
export class HomePage {
// THIS IS THE PROPERTY WE'LL USE TO SAVE YOUR DATA
private myFirebaseData: any;
constructor(){}
// LET'S FETCH DATA WHEN THE USER FIRST LOADS THE PAGE
ionViewWillLoad(){
firebase.database().ref('Users').once('value', snapshot => {
this.myFirebaseData = snapshot.val();
});
};
}
So explaining a little more of what i've done:
.ref(<string>) is the reference of a node in your firebase database, here i'm fetching all users. You can go as deep as you want, let's say you want the name of a user and you know his ID, you can use .ref(Users/${this.userID}/name) and this'll return his name.
.once() is used to read the data once and value is saying i'll get all the value in the referenced node. You can use .on() and this'll create an observable in that node for the value event. There are other events you can use with .on() and they are child_added, child_moved, child_changed and child_removed.
snapshot.val() is getting all data returned from my callback function.
Here's some useful docs:
Read Events
Querying data
Read, write, delete, update
Hope this helps.
EDIT
Let's say you haven't configured your application to use Firebase, here's the needed steps. Just an observation: i don't use AngularFire2, the methods can be a little differents.
1 - You'll need to install Firebase, so in your project folder use npm install --save firebase on your command console.
2 - In your app.component.js you'll configure your Firebase to point to your project:
import * as firebase from 'firebase';
export class MyApp {
constructor(){
firebase.initializeApp({
apiKey: "key",
authDomain: "domain",
databaseURL: "https://...",
projectId: id",
storageBucket: "bucket",
messagingSenderId: "id"
});
}
}
3 - The properties i used to configure Firebase can be obtained when in your project Firebase console under Settings > general > Add app > Add firebase to your web app (Or something like that).
This is all you'll need and you're ready to use Firebase.