1.1: fetch() – Working With Data & APIs in JavaScript



Welcome to Working with Data and APIs in Javascript!

This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects. This is the first video of the series!

1.1 This video is client-side only and covers the web fetch() API, loading image data and focusing on handling asynchronous events with Promises (async / await),

🎥 NEXT LESSON: https://youtu.be/RfMkdvN-23o
🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X

💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS
🔗https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/codingtrain/
📚 Books: https://www.amazon.com/shop/thecodingtrain

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

49 thoughts on “1.1: fetch() – Working With Data & APIs in JavaScript

  1. i'm sorry, but the n00b in me has to say it loud… so here comes the CAPS:

    "IT'S BEEN DAAAAAYZ I AM STRUGGLING ON GETTING A SIMPLE API CALL TO JUST WORK AND LITERALLY NOBODY BUT CODING TRAIN TOOK THE TIME TO EXPLAIN & DEMONSTRATE IT IN A PRACTICAL MANNER (..and with such enthusiasm!) ! I FINALLY UNDERSTAND HOW IT WORKS! ALERT("THANK YOU SO SO MUCH!! <3 <3 <3")

  2. I just love how he reminds me of my 6th grade teacher, like he literally has that same enthusiasm! Makes me really want to learn JS. Such an awesome job at keeping your viewers attention. I kinda wander off when learning on my own lol

  3. can you read the excel file with javascript code provided by full path of that excel file without 'choose file' html option? I am looking for it in the whole world. do you have the solution?

  4. Hi can someone please help me out? Idk why but I can't find a way to fetch…..
    My code:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    </head>

    <body>

    <img src="" id="Hogwarts" />

    <script>

    console.log("Fetching data…….");

    fetch('C:UserssmoezPicturesScreenshotsschermopname(53).jpg');

    </script>

    </body>

    </html>

    error:
    Fetch API cannot load file:///C:/UserssmoezPicturesScreenshotsschermopname(53).jpg. URL scheme must be "http" or "https" for CORS request.
    (anonymous) @ index.html:14

    and

    index.html:14 Uncaught (in promise) TypeError: Failed to fetch
    at index.html:14

    I would be rlly gratefull if someone can help me

  5. i always head straight to your videos on any topics i learn, because of the way you explain and energize me. I am literally happy while watching your vids!

  6. Was coding along and I too kept on mispelling response too! Ahhh! Great tutorial. I enjoyed the challenge at the end which pushed me to make sure I understand how this all works! Looking forward to the rest! <3

  7. Thank you, I had to scout a few videos with different teaching approaches and after 1-2 'explainer' videos and some stackoverflow posts I still didn't get "fetch" – putting it on whiteboard and the 'promise' aspect of the response really clinched the function for me. Thanks!

  8. I am finally able and happy to report that I was able to write code to fetch an array of images and put them in a web page. I was also succesful to fetch the text in a .txt file. I have a good understanding of HTML and CSS and a few weeks of learning Javascript, so my next goal is to construct a web page to display analytic and historic information of Formula 1. There are a couple of API's available that I can use, so wish me luck!

  9. hi good day, your videos is great .. but i have problem apply it in my own personal project..

    i have successfully put or install the chart.js on my web application .. the problem here is the data i want to use in running the chart is in another web page in my web app .. i dont know how to link the data with my chart.js

    i will be glad if you can assist me..

  10. document.getElementById('rainbow').src = URL.createObjectURL(blob);

    above line of code is giving me the error "Failed to execute 'createObjectURL' on 'URL': Overload resolution failed"

  11. Bro, you are a lifesaver, thank you so much for the well delivered tutorial. You've provided the full context, focused on the function clearly, and chunked up the steps involved in an understandable and logical manner, which is really important for true comprehension.

  12. I've looked at your solution to display number of images..and it seems inefficient. it's better to call the catchRainbows function inside a loop and not declare it inside a loop in order to fetch the images in parallel. Non blocking code:
    const filenames = [
    "rainbow.png",
    "rainbow3.jpg",
    "rainbow1.jpg",
    "rainbow2.jpg",
    "rainbow4.jpeg",
    ];
    async function catchRainbow(filename) {
    const response = await fetch(filename);
    const blob = await response.blob();
    console.log(blob);
    const img = document.createElement("img");
    img.src = URL.createObjectURL(blob);
    img.width = "200";
    document.body.append(img);
    }

    for (let filename of filenames) {
    catchRainbow(filename);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *