How to upload a JSON file to firebase and access it as list items from the web?

#javascript #json #firebase #tutorial

If you have a large JSON file and you wanna upload it to a database, Firebase Realtime Database would be your first choice. But how can you import that large file directly without doing everything manually? And how can you fetch this data to as List items via Vanilla JavaScript?

Let's start with JSON => (JavaScript Object Notation) is used when data is sent from a server to a web page.

Here's how our JSON file looks like!⤵

{
    "Certificates-List" : [
        {
            "courseName": "Elements of AI: Introduction to AI",
            "institute": "University of Helsinki"
        },

        {
            "courseName": "Javascript Beginner",
            "institute": "Udemy"
        },

        {
            "courseName": "Introduction to Flutter Development",
            "institute": "App Brewery"
        }
    ]
}

First of all Configure your Firebase project for the web How to Configure Google Firebase for Web

Now click on 3 dots and select import JSON, select your file.

Ahhan! your JSON file is now uploaded to Firebase Realtime Database.
Now your database should look like this:

To see this as an API, Copy the URL of the database and write the folder name .json after it. Like this => https://test-45959-default-rtdb.firebaseio.com/Certificates-List.json

Now how can we access this data to a webpage using Vanilla JavaScript?
Create a ul tag with id="Certificates-List".
Your Project should look like this⤵

Time for the real part: Access data from Firebase to Web

Create a function to add items to the list like this:

function addItemsToList(courseName, institute) {
      var ul = document.getElementById("Certificates-List");

      var _courseName = document.createElement("li");
      var _institute = document.createElement("li");

      _courseName.innerHTML = "CourseName: " + courseName;
      _institute.innerHTML = "Institute: " + institute;

      ul.appendChild(_courseName);
      ul.appendChild(_institute);
    }

Here we grab the ul tag by id and then create the list items via li tag. Using appendChild store the grabbed data to list items.

Now create a function to fetch data from database:

function FetchAllData() {
      firebase
        .database()
        .ref("Certificates-List")
        .once("value", function (snapshot) {
          snapshot.forEach(function (ChildSnapshot) {
            let courseName = ChildSnapshot.val().courseName;
            let institute = ChildSnapshot.val().institute;
            addItemsToList(courseName, institute);
          });
        });
    }

Here we're fetching our data from Firebase Realtime Database with the ref of database folder name i.e Certificates-List. And then calling the addItemsToList() to get the data.

Now to load data