Fetch API Explained - Working with Data & APIs in JavaScript

[@codeSTACKr]

Correction: I misspoke that fetch is part of JavaScript ES6. It is an API that was introduced about the same time as ES6 by WHATWG. Comparability is currently at 92% across browsers. Thanks for all the support!! Next up watch: Async JavaScript - Callbacks, Promises, Async/Await - (2019) kzbin.info/www/bejne/fGnbcoGOjpWel7c 📚 My Favorite Web Design Books 📚 Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link) amzn.to/2JaiCL8

[@chaseezra5450]

A trick: watch movies at kaldrostream. Been using them for watching a lot of movies during the lockdown.

[@christopherfranklin9822]

@Chase Ezra Yup, been using KaldroStream for years myself :)

[@alibarznji2000]

your channel is outrageously underrated. Thank you for these amazing contents

[@codeSTACKr]

I appreciate that!

[@rafaelcalderon6658]

Simple, but not basic. This kind of tutorial are the best. Thank you

[@codeSTACKr]

You're welcome!

[@Webnoob]

Amazing hand-on tutorial, straight to the point. Really enjoyed watching that. We can learn something about the Fetch API, Promises and Async and Await. Keep it going. 🙂👍

[@codeSTACKr]

Thanks!

[@valentina2375]

1:55 i tried my own json but i get a " Fetch API cannot load file:///Users/valentina/Desktop/javascript/products.json. URL scheme "file" is not supported. '' im also using Chrome

[@tanercoder1915]

This was a very easy to understand tut. Thanks!

[@codeSTACKr]

Glad it was helpful!

[@Hunter-eu2jg]

Great Video. You should try to fold this into a full fledged app or blog tutorial built from the ground up.

[@codeSTACKr]

Great minds think alike.. It's on the way! 😁 Thanks for the support!

[@giancarloandrebravoabanto7091]

what do they mean when they say: get latest updates from the server using fetch ?

[@andresramirez4469]

i am trying to figure code to write for using fetch api on a json file and form validation

[@taiwodamilola8636]

how do i use what was returned from fetch (body) outside the fetch block..?

[@pjmclenon]

hello for me the catch block for errors is useless because it doesnt tell which actual line the error is; how are you suppose to find the error? Lisa

[@turnerkirk1920]

Love your Tutorials! I'm curious why you manually created the "i" variable and incremented it with "i++" to start at 1 instead of using the index that is given to you as the second argument in the forEach() method? (i.e. posts.forEach( (post, i) => { if (i < 9) //code block }); Is it better to do it manually for some reason? Or just personal preference? (at timestamp 6:04)

[@codeSTACKr]

Just to demonstrate the loop. I would normally use the index from forEach

[@turnerkirk1920]

@@codeSTACKr ok cool thanks for clarifying! Just making sure I wasn't missing something weird about the scope messing with indexes or something. I'm still learning what's what.

[@DuyTran-ss4lu]

Great teaching method and professional approach

[@codeSTACKr]

Thank you!

[@emredemirel9725]

That's a perfect explanation of how to do API calls. Can you make a video about how to use private APIs with fetch and promises? For example how can I get and post stuff to my Firebase.

[@codeSTACKr]

For sure.. I'll at it to my list 😁 Thanks for watching!

[@rahulsriram6295]

I'm unable to use tagged template literals for creating HTML elements and assign them as iinerHTML of a div, for images. Normal posts, text, JSON everything is showing up in the DOM, but images arent. How do I do it? let res = await fetch('unsplash.it/600/400'); let blob = await res.blob(); let output = ` `; document.getElementById('output').innerHTML = output; All this is wrapped in an async function

[@FeelingLike]

It gives me an error when i tried this code, should I run npm or something like this before hand?

[@kenturnbull9679]

If I am understanding what I just watched correctly, does fetch replaces the need for PHP and PDO, as well as AJAX, for moving data to and from a mySQL database.

[@shubham121gupta]

how could we make each post clickable and when clicked it should fetch using id of that post and return further details of that post, plz help i despertly need that in one of my project

[@codeSTACKr]

It would be a simple event listener for click which would pass the id to the API which would return those details.

[@deeptimonga7375]

Hi codeSTACKr, I am getting document.querySelector('#post-template') is null. Can you please help me

[@pratiksuryawanshi8282]

How to return the data ?? I am getting the undefined value

[@EyeIn_The_Sky]

How the hell did you manage to call a local file using the "fetch" API? Apparently it is not supported "yet", I tried for ages and kept getting "ERR_INVALID_URL"? Did you somehow host it on port 5500 on a live web server?

[@sylwesterjot921]

Very informative lesson Thank you!

[@ProgrammingwithPeter]

Great video, still like to use something like axios over this because fetch with internet explorer and safari doesn't get too well.

[@codeSTACKr]

For sure.. I actually totally forgot to mention compatibility. It's getting there at 92% compatibility but definitely think about your audience. Thanks for the feedback!

[@ProgrammingwithPeter]

@@codeSTACKr Your video is great nonetheless. It's the responsibility of the one that use it to check compatibility, depending on the project requirements.

[@navdeepdhamu1945]

God! This guy must be from web dev heaven!! Explained nicely. Please make a video on the This key word in real world usage?? I still don't understand that sh*t?

[@kubataiupov1245]

thanks for nice videos.

[@kenturnbull9679]

This is great. The sort of stuff I need. How about a more advanced version of the template example with multiple templates and fetching.

[@codeSTACKr]

More advanced stuff on the way..

[@kenturnbull9679]

@@codeSTACKr This await stuff combined with the fetch has given me sooooo many new ideas especially since I deal with sql databases extensively. Question becomes what is the best way to pass the data around. Using PDO objects now.

[@alibarznji2000]

it would be really helpful if you could do a tutorial on how to do this with an owl carousel

[@mikeviverette5867]

Awesome video!

[@codeSTACKr]

Thanks for your support!

[@suriyaas4877]

very helpful

[@muhammadebadurrahman]

john doe and jane doe could name their son johnny doe :P so they could keep their family naming convention LOL

[@soltiscd]

Subscribed.

[@Bertie211]

Confusing I think it’s not for me