Skip to main content

JavaScript Firebase Tutorial - How to Read and Write Data

 

<!DOCTYPE html>
<html>

<head>
<title>JavaScript Firebase Tutorial - How to Read and Write Data</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
<h2 style="text-align: center;" class="text text-success">JavaScript Firebase Tutorial - How to Read and Write Data
</h2>
<div class="container">
<div class="col-sm-6" style="border: 1px solid gray; border-radius: 8px;">
<h2>Reg. Form</h2>
<form action="#">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter email" name="email">
</div>

<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="psw" placeholder="Enter password" name="pwd">
</div>

<button type="button" onclick="createData()" id="save_btn" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-sm-6" style="border: 1px solid gray;border-radius: 8px;">
<h2 style="text-align: center;">Users Table</h2>
<div class="row">
<div class="col-sm-3" style="background-color: #ffdc5c;padding: 10px;">Name</div>
<div class="col-sm-3" style="background-color: #38b7ff;padding: 10px;">Email</div>
<div class="col-sm-3" style="background-color: #ff914d;padding: 10px;">Password</div>
<div class="col-sm-3" style="background-color: #ff914d;padding: 10px;">Action</div>

</div>
<div id="showUsers"></div>
</div>
</div>

<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-database.js"></script>
<script>
// Initialize Firebase
const firebaseConfig = {
databaseURL: "https://jankariwalla-1b3c0-default-rtdb.firebaseio.com/",
apiKey: "AIzaSyBMio4Hh1GRw4xWL-lR4gEwA48lnCU7mC0",
authDomain: "jankariwalla-1b3c0.firebaseapp.com",
projectId: "jankariwalla-1b3c0",
storageBucket: "jankariwalla-1b3c0.appspot.com",
messagingSenderId: "1033767654976",
appId: "1:1033767654976:web:f03ff4d6f7358e7d34f1a5",
measurementId: "G-1EKTNYT59F"
};
firebase.initializeApp(firebaseConfig);

// Create a new data
function createData() {
const newData = {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
psw: document.getElementById("psw").value

};

firebase
.database()
.ref("users/")
.push(newData);
}

// Read data
firebase
.database()
.ref("users/")
.on("value", function (snapshot) {

document.getElementById("showUsers").innerHTML = "";
snapshot.forEach(function (childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val();
let addDiv = document.createElement('div');
addDiv.className = "row";
addDiv.innerHTML =
' <div class="col-sm-3" style="padding: 10px; word-break: break-word;">' +
childData.name +
'</div><div class="col-sm-3" style="padding: 10px; word-break: break-word;">' +
childData.email +
'</div><div class="col-sm-3" style="padding: 10px;">' + childData.psw +
'</div> <div class="col-sm-3"> <button type="button"
class="btn btn-info" onclick="updateData()">Update</button><button type="button" class="btn btn-danger" onclick="deleteData()">Delete</button></div>';
document.getElementById("showUsers").appendChild(addDiv);
});

});
</script>
</body>

</html>


Firebase is a powerful platform for building web and mobile applications. It provides a real-time database, cloud storage, and authentication services, among other features. In this tutorial, we will learn how to read and write data to a Firebase database using JavaScript.

Before we begin, you'll need to create a Firebase project and set up your app to use the Firebase JavaScript SDK. You can do this by visiting the Firebase website and following the instructions.

Writing Data to Firebase

To write data to Firebase, we can use the set() method. This method takes two arguments: the path to the location in the database where you want to write the data, and the data itself.

For example, to write a new user to the "users" collection, you can use the following code:

javascript
firebase.database().ref("users/").push({ name"John"age30 });

Note that in this example, we are using the push() method instead of set(). This is because the push() method generates a unique key for each new item, which is useful when working with collections.

Reading Data from Firebase

To read data from Firebase, we can use the on() or once() method. The on() method listens for changes to the data at a specific location in the database, while the once() method retrieves the data once and then stops listening.

For example, to read all users from the "users" collection, you can use the following code:

javascript
firebase.database().ref("users/").on("value"function(snapshot) { snapshot.forEach(function(childSnapshot) { var key = childSnapshot.keyvar childData = childSnapshot.val(); console.log("key:", key); console.log("data:", childData); }); });

In this example, we're using the on() method to listen for changes to the "users" collection. The value event is triggered every time the data at that location is updated. The snapshot object contains the data at the specified location.

We are using the forEach function on the snapshot object to iterate over the child objects, because the snapshot object is not an array and does not have a forEach method of its own.

Updating Data in Firebase

To update data in Firebase, we can use the update() method. This method takes two arguments: the path to the location in the database where you want to update the data, and an object containing the new data.

For example, to update a user's name, you can use the following code:

javascript
firebase.database().ref("users/userId").update({ name"Jane" });

Deleting Data from Firebase

To delete data from Firebase, we can use the remove() method. This method takes one argument: the path to the location in the database where you want to delete the data.

For example, to delete a user, you can use the following code:

javascript
firebase.database().ref("users/userId").remove();

This is a basic example of how to use

Comments

Popular posts from this blog

ChatGPT Example to reduce number of extra javascript codes

How to use MAX and MIN function in MySQL Table Workbench

How to connect python with mysql workbench and read data using jupyter notebook