DEV Community

Cover image for Read Data From Firebase Firestore (V9)
abhisheks-12
abhisheks-12

Posted on

Read Data From Firebase Firestore (V9)

For reading data from firestore database we will need some starter files so clone this repo https://github.com/abhisheks-12/Blog-dev-to

1) Go to https://firebase.google.com/ then click on Go to console.

2) Now create project with name parking system and after that turn off google analytics.

3) After that click on </> icon which represents web app.

4) Register app with any name , then copy firebase configuration and if you don't have firebase install firebase first.

Image description

5) After that go to your editor open src/Firebase/config.js
and paste configuration here

Image description

6) Again go to firebase click on firestore database.

Image description

7) Click on start collection and create your data base like this
picture
Image description

8) Now come back to your text editor open src/App.js.

9)Import following statements
Image description

10) Now we will fetch data from firestore so we will use async function so first see this code
Image description

11) Here we are using getData function to fetch data ,now we will save data in parkingData first console log parkingData after logging we will find doc value in this value there will be objects of our data.

12) In setCars we are setting data in array using map method . All properties will come in different objects so we are destructuring
this properties into one object with unique id .

15) Now we have data and now we are going to loop over that data
using map and access every property and set it in our html .

Image description

16) Here is final code https://github.com/abhisheks-12/Blog-dev-to/tree/final/src

Discussion (0)