Thanks to this series, coupled with API specific instructions on the web, I can go about making a weather app, largely on my own, incrporating it into time and date apps I've built. A week ago I had absolutely no idea how to go about getting and manipulating the data for such a project! I know, far too many weather apps have been built 🙂, but I'm just excited to be able to build one, just like the thousands of people who were able to do so before me.
wow... i was until now struggling with why two then blocks with a fetch API... this is a brilliant deconstruction. i think i finally get it now. Thanks so much Shaun for all that you do.
I was looking for a introduction to the fetch API, since I've mainly used jQuery to do API calls, and this video did a very good job of it. Really easy to follow and understand.
Oh, to like this entire playlist at once. Plenty of folks are ready to explain fetch, but few go into the rigmarole of explaining the guts of the thing (which is what my wandering mind needs.) I "promise" to check out your Udemy course. Best of luck.
what a fantastic and easy to understand vid, Thanks so much. Taking a course with an internet training provider, wished they made so easy to understand. ha ha.
if may i say Ninja, you should put a "hi-pass filter" on your voice record. Set it up for about 80hz, so all the bassy of your voice would get rid off. It can be easily done despite of any video editor you use. Thanks for this update of that godamn api !. mucho love
It really depends. If you're using sensitive data (such security credentials) in your fetch, then definitely backend, because you don't want those to be exposed from the frontend. There are other reasons too, but they would be very specific to the use case. Otherwise, you can allow the frontend to carry out some of the fetching work :).
Is it possible for you to combine a course using HTML and CSS to create a login, register and logout interface, using PHP to register the users for logging in and then combining it with Javascript to allow them to chat with each other using Asynchronous Javascript? Also adding sessions for guests with unique but temporary guest ID's on the MySQL database? I would consider paying for that too as a project course.
I like to ask something, response.json() is return a promise right? And .then() return a promise also right? In the video you return a response.json() inside .then(). So is it means it return a promise inside a promise? I hope you understand what I mean
Not that easy to understand - especially the usage of return (apparently required for the chaining) -, but you offer a bunch of pretty useful example of the promise ecosystem.
i believe that in the first 'then' we should put something like this: .then(response => { if (response.status === 200) { return response.json(); } else { throw new Error('Something went wrong'); } })
What would be the reason for this error: rejected SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data I can't figure this out at all. I created my own JSON file and I get this. Also trying this in a REACT project.
Why does the fetch API returns a promise when using response.json()? As we have seen from the XMLHttpRequest, parsing a string to JSON can be done synchronously, so why bother?
Please use the bracket matching extension on vs code, makes it really easy on the eyes. Anyways, great video as always Mr Pelling. Thank you for educating us for free like this. I'm currently taking your Vue2 course here on youtube (it's great btw). Anyways seeing as how Vue is now the top front-end framework on Github (173k+ stars) and how Vue has been updated, Do you have any intentions of doing a Vue3 course here on youtube? Thanks
The .json() method would be rejected if the requested data is HTML(or really any other data type than JSON). Because the html Syntax would start with something like
@@shr1han What I meant is: How can I process the JSON returened from the function so I can display the JSON in HTML. Example: const data = response.json(); document.getElementById('h1-element').innerHTML = data[0].name;
@@MrFxJ after fetching the data you would have an array. Then you can loop thought it and create html tags for each using `backticks` to insert the values. Then adding them to a variable "output" or whatever to then have it injected with the innerHtml method. It would be something like: data ={title: 'node ninja tutorials are cool', snippet: 'I've learned a thing or two...'} data.forEach( (item) => { output = '' (empty variable) output += ` ${blog.title} ${blog.snippet} ` } document.querySelector('.card'). innerHtml = output
The #1 mistake tutors make is teaching students an outdated long way of doing and then telling them there is a better way to do it. People can only absorb so much. Teach the easy way that works and students will learn other ways down the road.
I am a bit late, but I didn't understand the last part where you first said that data.json() contains the actual data but instead of assigning it to a variable or logging it to a console why you used another .then()?
when we have return response.json() that one is an object or array depending on your case we then take that thing and since it's the only thing it returns we can name it whatever and use it forward, convention is that we name it data, you could name it books, blogpots whatever you want it will only reffer to that returned value.
He is true ninja
Killing every web dev technology
With his sharp explanation skills
There are many great web educators here on youtube, but I think we can all agree that TNN is the best explainer amongst all of them.
@UCbyK7J6w9Pg97edZ2BdZdRg The Net Ninja, TNN is his channel's initials bro
@@fahimemroz9141 ohhh
@@fahimemroz9141 agree, master ninja rules and rocks !!!
Thanks to this series, coupled with API specific instructions on the web, I can go about making a weather app, largely on my own, incrporating it into time and date apps I've built. A week ago I had absolutely no idea how to go about getting and manipulating the data for such a project! I know, far too many weather apps have been built 🙂, but I'm just excited to be able to build one, just like the thousands of people who were able to do so before me.
wow... i was until now struggling with why two then blocks with a fetch API... this is a brilliant deconstruction. i think i finally get it now. Thanks so much Shaun for all that you do.
I had to choose between Netflix and your videos and obviously I'm here! Really nice content!
lol
This is the simplest explanation I've seen so far that makes the most sense. Thank you so much
Glad it was helpful! :)
I was looking for a introduction to the fetch API, since I've mainly used jQuery to do API calls, and this video did a very good job of it. Really easy to follow and understand.
You're underrated... I've not understood async JavaScript as much as I do now after watching your videos.
I love this guy. Anytime I can't figure out something, he has a video for it and it becomes a walk in the park. Absolute leg!
Aha, thanks Keifer :)
Thank you so much ninja for your courses , you are the best on this earth ;) keep going bro
Thank god The Net Ninja exists. I don't know what I would do without his great videos.
you are the best teacher I've ever seen. After struggling with fetch concept during months, now I get it...
Oh, to like this entire playlist at once. Plenty of folks are ready to explain fetch, but few go into the rigmarole of explaining the guts of the thing (which is what my wandering mind needs.) I "promise" to check out your Udemy course. Best of luck.
Net ninja has pretty good explaining skills. Every topic is to the point and very clear. Thank you for these great videos!
Your the best frontend teacher I have seen so far 👌👌👌
Do spring boot 😀
Thank you! 😃
I may do some day :)
I was stuck on learning api's and node.js for over a week and you helped me figure it out. God bless you
By far the next explanation i have come across for the fetch method. Thanks!
You are welcome! :)
This content is literally golden, even I understood it
That's great to hear :) thanks
man u did it
u the best instructor believe me
Ninja, you are a wonderful instructor! I understand everything you taught!
Happy to hear that! :) thanks for watching
what a fantastic and easy to understand vid, Thanks so much. Taking a course with an internet training provider, wished they made so easy to understand. ha ha.
This course is so well organized. It definitely deserves a Kudo
Thank you!
Man You are an amazing mentor 🙇♂️🙇♂️
Thanks Subhajit! :)
Great job.
Now I know three ways to get APIs data so far.
Thanks Net Ninja :)
if may i say Ninja, you should put a "hi-pass filter" on your voice record. Set it up for about 80hz, so all the bassy of your voice would get rid off. It can be easily done despite of any video editor you use. Thanks for this update of that godamn api !. mucho love
Dude, you're a freaking legend
Thanks Shreyas!
Wao amazing, right now I understand how it works everything behind scene!
Best of the best explanation. Respect!
Your are a great teacher..!
You should get a million views.
Greatly explained
Amazing, thank you so much, you're my main go-to guy when I need a better explanation!
this is gold. Thank you for sharing so great content
You are the very best 😍 please keep it up
you are amazing👍👍
Thank you so much 😀
you are so spot on with your words, sir. thank you very much!
Loved it!!!
Thanks for this clear explanation.
fetch('best tutor on youtube').then((res)=>{return res.json()}).then(data=>{console.log(data)}).catch(err=>{console.log(err)}) // output: [{Best Tutor: 'Net Ninja'}]
😃😃
truely you are a ninja
Thank you very much! Really helpful!
hello thenetninja, will you make videos for mern stack ??
you are more than awesome my friend
Thank you for your explanation
I have a question:
Is it generally better to do the api fetching by writing in frontend or backend?
It really depends. If you're using sensitive data (such security credentials) in your fetch, then definitely backend, because you don't want those to be exposed from the frontend. There are other reasons too, but they would be very specific to the use case. Otherwise, you can allow the frontend to carry out some of the fetching work :).
Great video🤍 are there any mern stack playlist soon? I’m excited
perfect explanation !
Perfekt my friend!
Is it possible for you to combine a course using HTML and CSS to create a login, register and logout interface, using PHP to register the users for logging in and then combining it with Javascript to allow them to chat with each other using Asynchronous Javascript? Also adding sessions for guests with unique but temporary guest ID's on the MySQL database? I would consider paying for that too as a project course.
hahahah PHP hahahahah.....even reading those three letter together makes me cringe.
Yes it is possible
@@joker_j1268 I think it's not possible that he will do this as a project.
@@TuringTested01 What's so hilarious about PHP. He runs courses in that language, and it's still used widely.
my top tuts playlist when im lost or i forget something.
greetings Shaun :) just wondering, any chances to see in the near future some Next/Nest/Angular series ?
Great video
Thanks Emanuel!
How does the program know that the "data" is what our file hold "luigi"
we didn't define the object data and store any information in it
thanks
Please do an updated react course
Hi,
What is the github repo for this series?
Thank you ninja
thanks ninja
Is there an example where you don't use console.log? What if I want to get the values and assign them to a variable to be used?
I've been struggling with that too, you must write an additional function which will assign your data to that variable.
6:49 what the hell, its so simplified
I like to ask something,
response.json() is return a promise right? And .then() return a promise also right? In the video you return a response.json() inside .then(). So is it means it return a promise inside a promise?
I hope you understand what I mean
What if no data is returned from server and a template is rendered to response, instead? Will the template be rendered in browser?
can we use JSON.parse(response) instead of response.json() while fetching data?
response.json() automatically parses the data , which can then be chained. Also you write less code.
@7.09 If we console log response.json inside the first then block instead of using the chaining promise will that be wrong
Not that easy to understand - especially the usage of return (apparently required for the chaining) -, but you offer a bunch of pretty useful example of the promise ecosystem.
it is still not clear how to handle errors if fetch returns resolve object anyways. and catch doesn't receive err.
i believe that in the first 'then' we should put something like this:
.then(response => {
if (response.status === 200) {
return response.json();
} else {
throw new Error('Something went wrong');
}
})
Where is "err" coming from? Is that something built into javascript? Am I missing something?
What would be the reason for this error: rejected SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
I can't figure this out at all. I created my own JSON file and I get this. Also trying this in a REACT project.
Promises code is totally confusing to read when await is not used.
Why does the fetch API returns a promise when using response.json()?
As we have seen from the XMLHttpRequest, parsing a string to JSON can be done synchronously, so why bother?
Response.json also returns promises. So we need to chain another function after that.
A slight correction: the fetch API is not part of the Javascript language. It's a browser API.
And now I understand why everyone uses Axios instead of the fetch API.
Awesome
ty.
Please use the bracket matching extension on vs code, makes it really easy on the eyes.
Anyways, great video as always Mr Pelling. Thank you for educating us for free like this.
I'm currently taking your Vue2 course here on youtube (it's great btw).
Anyways seeing as how Vue is now the top front-end framework on Github (173k+ stars) and how Vue has been updated, Do you have any intentions of doing a Vue3 course here on youtube?
Thanks
How can I get upper 10 objects from api using fetch api
How to display the data returned from reponse.json() in HTML ?
The .json() method would be rejected if the requested data is HTML(or really any other data type than JSON). Because the html Syntax would start with something like
@@shr1han What I meant is: How can I process the JSON returened from the function so I can display the JSON in HTML. Example: const data = response.json(); document.getElementById('h1-element').innerHTML = data[0].name;
@@MrFxJ after fetching the data you would have an array. Then you can loop thought it and create html tags for each using `backticks` to insert the values. Then adding them to a variable "output" or whatever to then have it injected with the innerHtml method. It would be something like:
data ={title: 'node ninja tutorials are cool', snippet: 'I've learned a thing or two...'}
data.forEach( (item) => {
output = '' (empty variable)
output += `
${blog.title}
${blog.snippet}
`
}
document.querySelector('.card'). innerHtml = output
any Vue3 course ?
I wish I can could meet you in person. An Anonymous mentor!
100%😊
The #1 mistake tutors make is teaching students an outdated long way of doing and then telling them there is a better way to do it. People can only absorb so much. Teach the easy way that works and students will learn other ways down the road.
If you go to an interview they don't ask you the easy ways
@@karthikraj9394 in interviews you can solve the problem or not.
watched 9/10
Waiting for episode 10
at :37 ...no i think he did it just to annoy us 😀
Anyone in 2023
Stupid syntax.
I am a bit late, but I didn't understand the last part where you first said that data.json() contains the actual data but instead of assigning it to a variable or logging it to a console why you used another .then()?
the fetch returns response.json().
Does it become data in the following step?
when we have return response.json() that one is an object or array depending on your case we then take that thing and since it's the only thing it returns we can name it whatever and use it forward, convention is that we name it data, you could name it books, blogpots whatever you want it will only reffer to that returned value.