# 9 MERN Project Series | Display Database data on React Frontend | Food Delivery App | Hindi 2023
ฝัง
- เผยแพร่เมื่อ 7 ก.พ. 2025
- 9 MERN Project Series | Display Database data on React Frontend | Food Delivery App | Hindi 2023
MERN FULLSTACK PROJECT SERIES. MERN Stack stands for MongoDB, Express.js, React JS and Node.js.
This is the PART 9 of our MERN Stack Project Series in which we will be fetching our data from database through an API endpoint and displaying it on our react frontend.
✅ Content Creator & Video Editor: Arshdeep Singh - / arshdeep-singh123
✅✅-------------------MY GEARS-------------------------✅✅
Boya Mic: amzn.to/3K85nbx
HP Wireless Mouse & Keyboard: amzn.to/3toLDdS
Lenovo Laptop i5: amzn.to/3K6grpQ
Mouse Pad: amzn.to/3fmuEko
Google Pixel 4a: amzn.to/3nk0imH
Boat Earphones (BassHead): amzn.to/3zVPSPt
msi Monitor: amzn.to/3qnqEX2
SOCIAL MEDIA:
Instagram: / endtoend91
In this Fullstack Project Series we will be going to build a Food Delivery Web Application using #mernstack #mernstack in 2023 can arguably be considered as one of the top most, in demand #fullstack for #webdevelopment .There are huge demand for #mernstack #webdeveloper currently. In this series I'll be covering some very important topics from #mongodb , #mongoose , #react / #reactjs , #express / #expressjs and #nodejs .
Concepts like useReducer , Context API, useContext, react hooks, createportal , async/await, promises will be covered from #react and #javascript .
Will be using #bootstrap 5 for making our application #responsive .
Will be using MongoDB Atlas for storing our data in a #database .
Viewers can ignore these tags:#endtoend javascript ,javascript mastery ,js mastery ,master javascript ,mern stack ,mern stack tutorial ,react full stack ,mongodb tutorial ,full stack ,mern stack tutorial 2022 ,mern tutorial ,mern stack project ,mern app ,mern app with authentication ,react node express mongodb ,mern stack traversy ,mern stack tutorial for beginners ,mern application ,full stack mern application ,mern stack crash course ,mern stack react ,mern stack social media ,full stack mern webdevsimplified ,mongoosejs ,mongoose js ,mongoose node ,mongoose mongodb ,mongodb nodejs ,mongodb ,mongo nodejs ,mongodb node js ,mongo node ,mongo node js ,mongodb node ,mongoose node js ,mongoose nodejs ,mongoose tutorial ,mongoose js tutorial ,mongoose javascript ,mongoose javascript tutorial , ,mern app ,MERN STACK ECOMMERCE ,MERN STACK ECOMMERCE WEBSITE REACT ,REDUX ,MONGODB IN HINDI COMPLETE PROJECT ,mern stack ecommerce ,mern stack ecommerce project github ,mern stack ecommerce tutorial ,mern stack ecommerce website ,mern stack in hindi ,ecommerce website in hindi ,mern stack ecommerce website in hindi ,ecommerce website source code free download ,mern ,mern stack app ,mern full project ,mern stack ,mern stack in hindi ,prerequisites for mern stack ,mern stack full course in hindi ,mern stack tutorial in hindi ,mern ,mern stack ,react ,express ,node.js ,mongodb ,mern tutorial ,react full stack ,full stack ,mern stack tutorial, json web token, jwt token, brcypt.js - วิทยาศาสตร์และเทคโนโลยี
We can create the Carousel in HomePage without copying it. By the way, learning from this course is immensely beneficial. Your explanations are exceptional and unparalleled, as no one else is able to deliver such clarity.
Best playlist for mern project on entire TH-cam .
I learnt mern from Harry bro but there was no such major project. And also from here I learnt many new things
Thanks for this comment 😊🤝. But #harrybhai is on another level ✨💯
@@EndtoEnd91can you plzz tell why card are not visible in my frontend I am facing these problem for a long time
@@Enigma2002j same here if you resolve this then tell me to how resolve it or provide the code
Really coping up with this playlist👍👌
Awesome sir ❤.
Waiting for projects more than this😊
Please help me
(Props.ImgSrc ) not working in cards please help me
Very Informative Playlist
Bro talk like 'Aamir Khan " 😃😃👍👍, nice video sir ji
Good Video
Support You Sir
toArray(function()) did not work as collection.find() takes time and should use await for this and should use it like this ----- let data=await fetched_data.find().toArray();
Can you give to error handling for this data
Thanks
great
very good course. But I do have a query. Why are you using POST request when the task is only to fetch some data from db and not change it? We should use GET for that right?
in get data the response is displayed on upper search panel when routes change and data uploading time ,
which will destruct our security purpose And through post method data is in hided form.
how we are getting data while making a post request(in diaplayData). Should'nt we make a get request to get the data instead of post request????
in get data the response is displayed on upper search panel when routes change and data uploading time ,
which will destruct our security purpose And through post method data is in hided form.
32:59 data print nhi hora....... Someone please help 🙏
A lot of people are getting this error that they cannot get the data.
So the problem is that he is using different version of mongoose. So its documentation is changed. I tried to find the new documentation about this topic but i could not find it. So i downloaded old version of mongoose and i got the data.
he is using 6.6.1 and at this time mongoose version is 7.3.1.
Run this command in the backend folder
npm i mongoose@6.6.1
And then copy paste his code. You Will receive the data. Hope it Works For u bcz it worked for me.
PS : I am also a beginner trying to find solutions. I am not a pro. So don't ask me how to make it work in the latest version
thankyou bhai tum bahut mast kaam karta he
Yes, this helped me fix the DisplayData, Thankyou!
Thank you Brother .It worked for me .
@@sachinmags9605 hey..foodCategory data is not showing on mongodb
please reply if possible
I have used Carousel as component and passed data back to Home Component from Carousel Component which is more flexible and optimized
bro, have you completed the project?
did you use redux or contextAPI??
let option = props.options ?? {};
let priceOptions = Object.keys(option);
in the video when I am using useState and calling at 37:27 my webpage does not the way it should instead only one cart is visible .please help
same here
but why to write display code in dabase file...it is unreachable showing ... why nit display data code written in display data file
i have use in loadData() but (ERROR
NetworkError when attempting to fetch resource.
) this error in project.
we didn't even defined the schema and model for the food_items and foodCategory , are those fixed ?
Let priceOptions = Object.keys(options); showing cannot convert undefined or null to object
Did you got any solution?
ha bro !! solution mila aapko?
Same error...plz provide any solution for this
@@Reshu_Sharma_10 do this let priceoption=Object.keys(options || {}) it will solve the problem
@@prashantpandey2848 no its not working
At 18:14, when using res.send(global.food_items,global.foodCategory); I am getting internal server error 500. It is working fine when i am using only one of the parameters in res.send(). Any fixes for the issue??
Nevermind, missed wrapping both the parameters in [ ]
Have you written the db.js code using try and catch? If so, can you please tell me how have you included the foodCategory line in it?
yes this is true@@shashwatanand5169
sir when i map priceoption it retun _id and all other option data in array,
likeit return [_id,half,full].
Data is not fetched , and mongo db status is true means it is connected but null is returned in Thunderclient
same it happen with me if anyone have solution pls help
@@preranashinde8554 Same error
@@bikramjitbiswas7712 just check code again and code is available on 12th video in the discription
Check the code where the foodCategory data is being fetched and assigned to the global.foodCategory variable. Make sure that the fetched data is not null and is correctly assigned to the variable.
Verify that the foodCategory collection in your MongoDB database contains the expected data. Check if the collection is populated with the correct documents.
const fetched_data=mongoose.connection.db.collection("BeingFoody_items");
const data = await fetched_data.find({}).toArray();
global.BeingFoody_items = data;
just write these three lines in db.js in place of
const fetched_data=mongoose.connection.db.collection("BeingFoody_items");
fetched_data.find({}).toArray(function(err,data){
if(err) console.log(err);
else{
console.log(data);
global.BeingFoody_items=data;
}
})
it will work now
At 10:00 my data was displaying as null.
I dont know why but putting an '_' before req worked
Same
Did you get the solution
Same
its does not display data of full and half it just showing 0 on card how can i solve this
somebody help me in which video the collection foodItem is created
53:30
i have tried alot,
console.log (prop.options) is displaying data on the console but not passing it to the front-end
same
@@motivationalshorts393there's a little issue with the keys .. He did not explained it well,
Don't write the code as it is, i have changed the code and it has worked...
can you please provide the correct code@@Hilalishere
@@Hilalishere can you provide your git repo link
please send that code@@Hilalishere
Unable to fetch data from database, whole application is running seamlessly without error, but when I try to fetch data from database I m receiving null in array. Please help me with this!!
hi pratik i am having a same issue if you solve this issue please let me know how you do it
did uh guys solve the issue , because i m getting the same ??
Can anyone help me please i am stuck at img fetching in card i done exactly same but my img not fetching
search functionaility in the end
sir apka dekh ke project bana raha hu error aa raha hai map. foodcat not a function bata raha hai error nikalo na please
Img not showing in card rest everything working fine please help me
Any solutions for this??
Hello sir, at 10:05 I am not able to fetch data while sending the response through the thunder client API. Please help me, anyone.
Bro I am also facing this error please tell me how to solve this error
What exactly error you are getting so I can able to guide you further.@@ok_this_is_priyam
try this one 100% worked:
async function fetchData() {
try {
const fetched_data = mongoose.connection.db.collection("food_items");
const foodCategory= mongoose.connection.db.collection("food_Category");
const data = await fetched_data.find({}).toArray();
const catData= await foodCategory.find({}).toArray();
global.food_items = data;
global.food_Category = catData;
// console.log(global.food_items)
console.log(global.food_Category)
} catch (error) {
console.error('Error fetching data:', error);
}
}
@@ok_this_is_priyam try this one 100% worked:
async function fetchData() {
try {
const fetched_data = mongoose.connection.db.collection("food_items");
const foodCategory= mongoose.connection.db.collection("food_Category");
const data = await fetched_data.find({}).toArray();
const catData= await foodCategory.find({}).toArray();
global.food_items = data;
global.food_Category = catData;
// console.log(global.food_items)
console.log(global.food_Category)
} catch (error) {
console.error('Error fetching data:', error);
}
}
Where is the foodItem JSON I am not able to find. It is not there in the first video...
it is in #4
i have done everything but i didnt get from where that images came from directly can anyon help
i have issue of undefined map any solution ??
Cannot read properties of null (reading 'map') how to rectify this error in 40 min
yaa me tooo
const options = props.options || {};
const priceOptions = Object.keys(options).length > 0 ? Object.keys(options) : [];
@@Prachu_033
add this code
foodCat!==[ ] is giving an error saying This condition will always return 'true' since JavaScript compares objects by reference, not value.
How to solve this?
did you get any solution ?
foodCat.length !== 0
@@heliosplays5926 use foodCat.length!==0
cat_data == [ ]
? """"""""
: cat_data.map((data) => {
return (
{data.CategoryName}
@@heliosplays5926 use this , reverse it
Can u please tell me how did u solve that problem?
You have explained everything in very detailed way, Pls try to make a complete playlist
It is indeed, a playlist. Few more videos are left. It will be completed in a short while.
filter map not working
Does anyone have db.js code i am having errors 17:28
Sir my response 1 is not showing
Mere server me problem h mere laptop pe thunder client response nhi de rha aur dusre ke laptop pe shi aaya please koi meri help krdo
Json. File nehi add hua, mera
FoodItem, category file nehi hua... Please response
I am getting a white screen of death in the "/" route, Can somebody tell me where can the problem be? I have set the routes properly in App.js too
check in developer mode in browser what the error copy pASte in chatgpt aND taddaa issue solved
".map is not a function" getting this error, pls help
Do u found any answer bro
this happens when either your data is not in array form or you are not awaiting the data. Check your data is in array form first...
@@niketkumar3248 same code I have used
convert all to async first
cards are not rendering
please help
Yes bro me to
we can pass data child to parent using props. react provide this option. without redux we can pass.
why does my webpage does not display the cards with filter i want instead it displays only one card . And moreover it did not displayed the previous sentence we printed after matching
@dipak jayswal
this is my code till 42.09
Did you get the error Avinash
@@avinashpathak8237 did you correct it
my app function is rendering two times
cards not able to be displayed along with map function. In CONSOLE its showing the CORS error although i added the CORS code in index.js of backend as you said. Earlier i was able to show the cards
bro is the problem solved
I am facing same problem cards are not visible what is the solution for these?
@@Enigma2002j i am facing the same issues as well
Bro, I am stuck with the same problem if you have solved that please help
@@RaxpperGaming did u got solution
mongodb se data read nahi ho rha and display api per call karna ka bad response mai null a rha hai
try this one 100% worked:
async function fetchData() {
try {
const fetched_data = mongoose.connection.db.collection("food_items");
const foodCategory= mongoose.connection.db.collection("food_Category");
const data = await fetched_data.find({}).toArray();
const catData= await foodCategory.find({}).toArray();
global.food_items = data;
global.food_Category = catData;
// console.log(global.food_items)
console.log(global.food_Category)
} catch (error) {
console.error('Error fetching data:', error);
}
}
did you got solution?
@@seekgamersproductions7291 yes.
Database me data kidhar se import Kiya bhai and I want that json file
drive link description me hai
@@ramantripathi6980 bhai kha hai..??
I am not able to see options in my site plz help me
replace this line in Card.js just after return
it prints empty array however i also mention correct collection
try this one 100% worked:
async function fetchData() {
try {
const fetched_data = mongoose.connection.db.collection("food_items");
const foodCategory= mongoose.connection.db.collection("food_Category");
const data = await fetched_data.find({}).toArray();
const catData= await foodCategory.find({}).toArray();
global.food_items = data;
global.food_Category = catData;
// console.log(global.food_items)
console.log(global.food_Category)
} catch (error) {
console.error('Error fetching data:', error);
}
}
same here do you got any solution??
iska code hai kya sir github per mera run nahi ho rha sahi se backend connect karta he error ajata hai
My backend works perfectly but when i did this so my data is not show in react some one explain me if you face the same problem
const fetched_data=mongoose.connection.db.collection("BeingFoody_items");
const data = await fetched_data.find({}).toArray();
global.BeingFoody_items = data;
just write these three lines in db.js in place of
const fetched_data=mongoose.connection.db.collection("BeingFoody_items");
fetched_data.find({}).toArray(function(err,data){
if(err) console.log(err);
else{
console.log(data);
global.BeingFoody_items=data;
}
})
try this, it may help
@@sonammalik17 Thankyou, it is working :)
Thanks bro!!
@@sonammalik17 i try this but it stay not woking, empty array is returning [] like this
@@ManyamChaitanya also mine null array is return . due to that project is .............
use this otherwise react will throw a TypeError, bec it renders the return block first and then anything else, during rending of the return block, the priceOption array is null hence no map function can be run
let option = props.options ?? {};
let priceOptions = Object.keys(option);
really helpful, thanks.
55:00 pudhe bhaghych ahe
anyone please give me crousel component code
🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
where i can find fooditems database?
watch previous videos , he has provided json file in description
.lowercase is not a function error aa raha he
Case sensitive
Use .toLowerCase()
{foodItem !== []? foodItem.filter((item)=> (item.CategoryName === data.CategoryName && (item.name.toString().toLowerCase()).includes(search.toString().toLowerCase()))).map(filterItems=>{
return(
My toArray declaration was marked deprecated everytime can anyone give me solution..
Same problem..Is ur problem solved?
@@shreyakumari5674 did u find any solution?
const fetched_data=mongoose.connection.db.collection("BeingFoody_items");
const arr = await fetched_data.find({}).toArray();
arr.forEach(function(err,data){
if(err)
console.log(err);
else{
console.log(data);
global.BeingFoody_items=data;
console.log(global.BeingFoody_items);
}
})
const fetched_data=mongoose.connection.db.collection("BeingFoody_items");
const data = await fetched_data.find({}).toArray();
global.BeingFoody_items = data;
just write these three lines in db.js in place of
const fetched_data=mongoose.connection.db.collection("BeingFoody_items");
fetched_data.find({}).toArray(function(err,data){
if(err) console.log(err);
else{
console.log(data);
global.BeingFoody_items=data;
}
})
it will work now
same array null
sir food k data ki link kaha h
is there any source code available??
nope. this guy didnt provide repo ffs
Can anyone share the github link of this project.
it is in the last video description
can someone help??
i stucked
Category are not showing
Same issue
search.toLocaleLowerCase is not a function
Can anyone give the solution??
{foodItem !== []? foodItem.filter((item)=> (item.CategoryName === data.CategoryName && (item.name.toString().toLowerCase()).includes(search.toString().toLowerCase()))).map(filterItems=>{
return(
Same
use == const [search, setSearch]=useState(''); instead of const [search, setSearch]=useState([]);
You got any solution??
write String(search).toLocaleLowerCase() in place of search.toLocaleLowerCase()
it worked in my case
i m getting fetch data error what to do??
did you get any solution