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 it…

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.

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);
    }

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

window.onload(FetchAllData());

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


Print Share Comment Cite Upload Translate
APA
Sharjeel Yunus | Sciencx (2024-03-28T12:01:40+00:00) » How to upload a JSON file to firebase and access it as list items from the web?. Retrieved from https://www.scien.cx/2021/04/18/how-to-upload-a-json-file-to-firebase-and-access-it-as-list-items-from-the-web/.
MLA
" » How to upload a JSON file to firebase and access it as list items from the web?." Sharjeel Yunus | Sciencx - Sunday April 18, 2021, https://www.scien.cx/2021/04/18/how-to-upload-a-json-file-to-firebase-and-access-it-as-list-items-from-the-web/
HARVARD
Sharjeel Yunus | Sciencx Sunday April 18, 2021 » How to upload a JSON file to firebase and access it as list items from the web?., viewed 2024-03-28T12:01:40+00:00,<https://www.scien.cx/2021/04/18/how-to-upload-a-json-file-to-firebase-and-access-it-as-list-items-from-the-web/>
VANCOUVER
Sharjeel Yunus | Sciencx - » How to upload a JSON file to firebase and access it as list items from the web?. [Internet]. [Accessed 2024-03-28T12:01:40+00:00]. Available from: https://www.scien.cx/2021/04/18/how-to-upload-a-json-file-to-firebase-and-access-it-as-list-items-from-the-web/
CHICAGO
" » How to upload a JSON file to firebase and access it as list items from the web?." Sharjeel Yunus | Sciencx - Accessed 2024-03-28T12:01:40+00:00. https://www.scien.cx/2021/04/18/how-to-upload-a-json-file-to-firebase-and-access-it-as-list-items-from-the-web/
IEEE
" » How to upload a JSON file to firebase and access it as list items from the web?." Sharjeel Yunus | Sciencx [Online]. Available: https://www.scien.cx/2021/04/18/how-to-upload-a-json-file-to-firebase-and-access-it-as-list-items-from-the-web/. [Accessed: 2024-03-28T12:01:40+00:00]
rf:citation
» How to upload a JSON file to firebase and access it as list items from the web? | Sharjeel Yunus | Sciencx | https://www.scien.cx/2021/04/18/how-to-upload-a-json-file-to-firebase-and-access-it-as-list-items-from-the-web/ | 2024-03-28T12:01:40+00:00
https://github.com/addpipe/simple-recorderjs-demo