DEV Community

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

Posted on

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

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.👋

Top comments (2)

Collapse
 
eunit profile image
Emmanuel Uchenna

Great article man!

Collapse
 
sharjeelyunus profile image
Sharjeel Yunus

Thank You