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

Top 10 topics to make YouTube video in angular

  Here are ten topic suggestions for making YouTube videos on Angular: Getting Started with Angular: An Introduction to the Angular Framework Components in Angular: Understanding and Creating Angular Components Directives in Angular: Understanding and Using Angular Directives Angular Routing: Setting up Routes and Navigation in Angular Applications Forms in Angular: Creating and Validating Forms with Angular Reactive Forms Pipes in Angular: Understanding and Using Angular Pipes to Transform Data Services in Angular: Creating and Using Angular Services for Data Management Angular Animations: Adding Animations to Angular Applications Angular Material: Implementing Material Design in Angular Applications Advanced Angular Topics: Exploring Advanced Angular Topics like Lazy Loading, AOT Compilation, and Dynamic Components.

Top 5 javascript frameworks

  Here are the top 5 JavaScript frameworks : React: Developed and maintained by Facebook, React is a popular JavaScript library for building user interfaces. Angular: Developed and maintained by Google, Angular is a complete framework for building dynamic web applications. Vue.js: A relatively new JavaScript framework, Vue.js has gained a lot of popularity in recent years for its simplicity and performance. Ember.js: Ember.js is a JavaScript framework that emphasizes conventions over configuration, making it a good choice for complex web applications. Backbone.js: Backbone.js is a lightweight JavaScript framework that provides structure for web applications, particularly those that need to work with a lot of data. It's worth noting that the popularity of these frameworks can change over time, and different frameworks may be better suited for different types of projects and use cases.