#10 Get/fetch data from mongo db and show it in React JS | Fetch data from mongo | CRUD Mongo Db

hello guys welcome back to the debug arena in the previous video I have shown you that how can you login as an admin now you can see here that this is my mongodb and these are all the registered users in my website this is the combination of all the registered users and the registered admin in my website so if you want to know that how can you login as an admin in your website then you can watch my previous videos now in this video I will fetch all these users data to my admin screen and show it here so what will I do I will first create the node.js API which will fetch all the users data and store it in the response and that response will be received by our react app and we will show that users data to this screen inside the table so without any delay let's get started okay you can see here that if my user type is admin then I am displaying this message otherwise I am redirecting it to user home component so let me just create a new component name as admin home [Music] I will just go to user home copy this paste it here the name is at admin home [Music] delete this yeah okay and instead of this message now I will be showing here that admin home so now whenever admin will log in he will be redirected to this component let's see whether it is working okay it is coming but I think there's something wrong with the layout let's see oh yes I remember I have made the changes in the layout like I have removed this to class from here and added it individually to each component I think now it should do a job okay so now let me just show a message here [Music] Let's test this out so if I'm not getting this admin [Music] yes it is now redacting to this page now let me just create the table [Music] [Music] so my table will have this five columns let's see okay it is good by writing uh let's try by giving it with I will give it here [Music] width of 500 let's see how it goes now okay is good now let me just give here also [Music] with this Auto so I think it should do our job yeah now it is fine now we are done here now let's go to our node.js code and just create an API to fetch all the users data so you can see here that I have already made the connections to the mongodb I have already created the schema and this is my collection name user info and you can see here that I have imported it and also I have stored my collection in this variable so now let me just quickly make the API foreign because I am only getting the data the API name will be get all users [Music] so I will use try and catch block you can just console.log error now here I will just create a new variable name all user is equals to is my variable where my data is stored like my collection is stored and I am going to use this fine method provided by the mongodb this will find all the users data okay so like whatever users data it will find it will store it in this variable also don't forget to use awake because it may takes time now I will just send this data to our front end okay so my API is ready now let's just check it out because it is a get method we can also check it in our browser we have to just go to the port you have hosted your node.js server and after that write the name of the API so you can see here that our API name is get all users so if I write like this I will get all the data so you can see that the status is okay and we are getting all the data now let's just fetch this data in our front end and show it inside the table here I will create use effect [Music] okay let me just copy some part you know [Music] I will just delete all this [Music] there is no need here we have to write our get all usual API name method will be [Music] get [Music] here I am using then okay it's like my effect function is also ready currently it is controlling the data you can just do like this so that the use effect will only run once let's let's check it out [Music] okay so you can see here that user data is coming and it has 19 data okay now let's just display it inside the table [Music] so now here okay before that we have to set the data inside the state so I will create a new state and I will set data here [Music] data dot data so here I will just map that data [Music] just return window inside that will be TD here I will just write I dot f name so you can see here that my users have F name and name email and user type so I am not fetching a name other than that I'm fetching everything so TD let's see and you can see here that I am getting the list of all the users registered in my website so you can see that how easy it is to fetch all the users from mongodb and show it inside the table in our react app now let me just verify that data is properly coming or not so for that I will do logout and I will login as usual yeah so you can see that yes user is redacting to this screen now I will login as admin foreign where all the users should be displayed and [Music] you can see that yes it is working fine now in the next video what will I do I will create an API which will give admin the right to delete any user from his website let me know in comments whether your code is running or not that's it for this video if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 11,682

Keywords: fetch data from mongo db and show it to react using node js, mongo db find function, how to use find in mongo db, get data from mongo db using node js, develop api in node and mongo, admin dashboard, show all data in admin dashboard, get data from mongo db and show it in react table, show data in react js, react js, mongo db, node js, work with react node and mongo, MERN stack, learn mern, getting data from collection, Mongo db tutorial, crud operation, crud node mongo, crud

Id: BpR5dGRxeA8

Length: 9min 11sec (551 seconds)

Published: Mon Jan 30 2023