Why that many dislikes? Do people have any clue how important the knowledge in this video is? This video alone made feel confident about react cuz I'm just starting... Thanks man
Thank you so much for this video, I have already watched couple of videos about fetching data from internal JSON file , only in this video I fully understand and apply how I can display a json file , two thumbs up for this keep up !
U are really very great, its working , I did first time this , and its working, thank u soo much, i seen minimum 15 videos about api but i didn't understand api, but now in 11 min I learnt perfectly
Thank you so much. I found your video after I figured out a problem like this myself after mulling it over in my head all day. You simplified it. I do have a question though, what if there is another array of data nested inside that you need to access. As in each object had a nested array of objects in it as well. Do you do the same thing and just add the index to the map method?
I am beginner so plz bear with my question .. Why we need to add "Key" in instead of map line? the key is the index in my understanding and it should be with mapping control instead of html element?
Key is identifier. ReactJS forces us to use key so that we can target any element in the loop if we need to. It's just an identifier. It's a must if we want to map elements. For example, if you need to get an element or delete an element (single element), you need an identifier to do that, right?
So how should I access an object containing child elements like marks is an object and it consisting of several subject marks so how could I access them ??
@@webstylepressno not like that I have an object with keys and value and this value itself an object again so the object key is "marks" and values are maths:10,physics:20,English:30. So how should I access them now..
We are not using useState or useEffect here so no need for hooks in this case. Data from json file is directly used. If we need to store data in state and manipulate data, then we need hooks.
Hey man! Thanks a ton. How can I perform CRUD operations on that local JSON file??? Given that you're already Reading the file, what about Creating more posts, updating and deleting them... I know you can create an API using express or something and expose that JSON file through an API, but need to make it client side.
With only react js it's not possible. You can get records from json file in state and then manipulate state. State will reflect updated data. But to modify json file, you need node js and express. You will post updated data from react to an end point. That api end point will take new data and will update json file. I will share this tutorial, hopefully this week.
@@webstylepress Hey man, thanks a ton, I will check that out. My use case was to use ReactJS with Electron, and at that time I didn't know how to do it. I learned IPC in Electron and how to use it in the Renderer process, so I did that and my use case was solved. But I still wanted to know the answer to that question. Thank you for making a video on it and your awesome response! 💗
Hey massive thanks to you, But Recently I have came across an issue while using Image paths inside the JSON file, Its throwing "image/path" module not found.
Module not found: Can't resolve './data/datav.json' in 'C:\Users am actually getting this error. I like your video by the way. Do you how i can solve it?
Because dealing with local data is fast and quick for the tutorial. It can also be implemented by beginners in their work quickly. Using external APIs can confuse beginners.
To watch more related videos, please LIKE, SHARE & SUBSCRIBE! WebStylePress needs your support.
Why that many dislikes? Do people have any clue how important the knowledge in this video is? This video alone made feel confident about react cuz I'm just starting... Thanks man
Thank you.
Thank you so much for this video, I have already watched couple of videos about fetching data from internal JSON file , only in this video I fully understand and apply how I can display a json file , two thumbs up for this keep up !
A massive thank you from UK. Been losing my mind on this for a while now. Keep up the great work!
Thanks for lesson about mapping JSON data. It's very helpfull!
This literally helped me with a homework assignment tonight. Cheers! Thank you for the helpful tips and I hope you continue to make more videos.
Thank you sir. I can understand from your explanation. It's really helpfull to do my homework. From Indonesia
good man you save my day I just needed this simple video but wasted my time in other stuff.. Thanks for the information
U are really very great, its working , I did first time this , and its working, thank u soo much, i seen minimum 15 videos about api but i didn't understand api, but now in 11 min I learnt perfectly
Glad to hear that
Great tutor, easy to follow with nice easy example to understand how to parse and map in React.
Nice dude!!! I was looking exactly for this!! Thanks from Brazil!!!!!
Thanks a lot! It's useful for beginners...Plz, Keep posting your videos.
man u save me fo lossing thanks alot
Thank you very much seriously I've seen alot videos but this is what I needed 👍👍👍
Thank you
My advice on this video is to put the speed to 1.25, besides that, great video :D
Just wanna say thanks alot from bottom of hearts u r amazing tutor 👑
Thank you! You saved me!
Plz give the video a like and subscribe to channel. It will help the channel.
Awesome 🤩🤩
thank you so much! 😭
great tutorial
Clear and nice explanation. Thank you.
Great job mate! You really helped me and i appreciate it! Good luck.
Thanks alot!! Nanbaa *From TamilNadu*
Thank you very muchhhhh
Thankuuuuuu so much for the video.I literally got stucked in this.This really helped me a lot
Glad it helped!
Really informative and easy to understand video. Thank you!
Thank you very much! Helped a lot 👏🏻👏🏻
Thanks from Armenia!!!!
Welcome!
useful tutorial, thank you
Thank you so much. I found your video after I figured out a problem like this myself after mulling it over in my head all day. You simplified it. I do have a question though, what if there is another array of data nested inside that you need to access. As in each object had a nested array of objects in it as well. Do you do the same thing and just add the index to the map method?
Graciasssssss, me sirvió mucho.
Thank you very much!
Can you tell me how to run this proh
you should have nodeJS installed in system.
- then install packages:
npm install
- and run the app:
npm start
TY
thank you sir
Great Video....
Thanks, simple and useful
Play it at x1.5 speed and sounds normal
watch in 1.25x
Practical
I am beginner so plz bear with my question .. Why we need to add "Key" in instead of map line? the key is the index in my understanding and it should be with mapping control instead of html element?
Key is identifier. ReactJS forces us to use key so that we can target any element in the loop if we need to. It's just an identifier. It's a must if we want to map elements. For example, if you need to get an element or delete an element (single element), you need an identifier to do that, right?
sir how can we get individual id detail in key? like to print only id 1 details rather than printing all
????
.filter().map()
Try this ruclips.net/video/V0KsFee5iSc/видео.html
Recommended speed 1.5x :)
So how should I access an object containing child elements like marks is an object and it consisting of several subject marks so how could I access them ??
Marks.math marks.physics marks.something
@@webstylepressno not like that I have an object with keys and value and this value itself an object again so the object key is "marks" and values are maths:10,physics:20,English:30. So how should I access them now..
Thanks sir
GREAT !!! thank a lot, How can it works using hooks?
We are not using useState or useEffect here so no need for hooks in this case. Data from json file is directly used. If we need to store data in state and manipulate data, then we need hooks.
how can we limit the elements to perticular number in display
Use slice.
data.slice(0, 5).map() ...
can I put different style in json file then fetch it to another js file file using map? if yes then please explain it
if you add images into the object how to output it? images do not display
You can use image path in json file. Then use img tag in JSX to display image.
Hey man! Thanks a ton.
How can I perform CRUD operations on that local JSON file???
Given that you're already Reading the file, what about Creating more posts, updating and deleting them...
I know you can create an API using express or something and expose that JSON file through an API, but need to make it client side.
With only react js it's not possible. You can get records from json file in state and then manipulate state. State will reflect updated data. But to modify json file, you need node js and express. You will post updated data from react to an end point. That api end point will take new data and will update json file. I will share this tutorial, hopefully this week.
Thanks for the reply man!
Surely would check that out!!!
There you go
ruclips.net/video/lFkBk3f6Xww/видео.html
@@webstylepress Hey man, thanks a ton, I will check that out.
My use case was to use ReactJS with Electron, and at that time I didn't know how to do it.
I learned IPC in Electron and how to use it in the Renderer process, so I did that and my use case was solved.
But I still wanted to know the answer to that question. Thank you for making a video on it and your awesome response! 💗
How to call nested json object in this please help me out
Please see description. There are related tutorial links about JSON and React JS. I have covered nested JSON object in those tutorials.
Hi.. Please use icons in .json, i tried but its not working..plz help me in this
There you go: ruclips.net/video/NWG1Ygt1k1k/видео.html
Display Icons / Images from JSON File in React JS
Hey massive thanks to you,
But Recently I have came across an issue while using Image paths inside the JSON file,
Its throwing "image/path" module not found.
You will have to require images including path
hello sir can u please teach d process to use nested json in react
Module not found: Can't resolve './data/datav.json' in 'C:\Users am actually getting this error. I like your video by the way. Do you how i can solve it?
I sorted it out. I move the file out of the folder, to the same folder as the component. THANK YOU!
How to use hyperlink/url ?
So would this mean, that the s3 static file hosted could be consumed by our react app?
Yes
Suppose I have json data with first name and last name. But for one record the last name missing I get an undefined error. How do I get around this?
Simple check if data not null then display in react
hey ...can this JSON be used for huge data and making the webpage dynamic?
U can use multiple json files to store different types of data and load relevant records.
How do you display information from only 1 specific id?
In that case dont use map method. I ve already shared a video on this.
@@webstylepress can you please send me the link to that video?
what if we have 2 json files? how to call them?
Why do these people always show hard coded examles for? Ive never seen a tutorial video where they get data from an external API
Because dealing with local data is fast and quick for the tutorial. It can also be implemented by beginners in their work quickly. Using external APIs can confuse beginners.
how do i get access just to the first item and not all of them? really like ur video too :D
Why it is showing error?
You may have missed something
Double speed...thank me later ;)