How to upload a JSON file to firebase and access it as list items from the web?
Tags: javascript, json, firebase, tutorial
Published: 2021-04-18 11:09:23

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!⤵ 
```JSON
{
    "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](https://www.youtube.com/watch?v=q5tAUb_bvqg&ab_channel=TACV-TheAmazingCode-Verse)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5v7xmtbxk3bg9v2oniz.jpg)
Ahhan! your JSON file is now uploaded to Firebase Realtime Database.
Now your database should look like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c44ft10clmdrq9jv83ta.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3avjywcrphwedpd3erq.png)

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

Create a function to add items to the list like this:
```JavaScript
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:
```JavaScript
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 
```JavaScript
window.onload(FetchAllData());
```

Your code should be like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rs3wrcvawahay8yaswj.png)

And here's how your web page should look like:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvfgfhmmcyrqpk9wmald.png)

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