DEV Community

loading...
Cover image for How to upload a JSON file to firebase and access it as list items from the web?

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

sharjeelyunus profile image Sharjeel Yunus ・2 min read

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"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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.

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

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⤵
Alt Text

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);
    }
Enter fullscreen mode Exit fullscreen mode

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);
          });
        });
    }
Enter fullscreen mode Exit fullscreen mode

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

window.onload(FetchAllData());
Enter fullscreen mode Exit fullscreen mode

Your code should be like this:
Alt Text

And here's how your web page should look like:
Alt Text

That's it. We're all OK. Now you can customize this data and webpage however you like.👋

Discussion (0)

Forem Open with the Forem app