Fetch API & Rendering Data with JavaScript

In this video, we take a look at the browser's built in Fetch API to get some dummy data. We then map over that dummy data to create some HTML with Vanilla JavaScript and render it onto the screen.
Key Takeaways From The Video:
3:20 - The Fetch API returns a Promise, so you need to wait for the promise to resolve by using .then() after it.
4:16 - The Fetch API initially return a Response object, which will tell you the status code of the response among other details
5:15 - We need to run the .json() method on the response object to turn the response into more useful data. The .json() method will also return a promise, so we need to chain another .then() onto it.
8:10 - When using the Fetch API, it won't automatically throw all errors. You have to manually check to see if the response object has an "ok" property on it, and throw an error if it's not. This will help you catch things like a 404 error with the response.
11:11 - In order to render our data to the screen, we can use innerHTML or insertAdjacentHTML and insert an HTML string into an existing HTML element.
14:13 - Since the data we get back is an array, we can perform .map() on the array to loop over the data. We then use Template literals to construct our HTML string.
22:10 - With the Fetch API, you can also perform a POST request by adding additional options when making the request. Make sure to add the proper "headers" and use JSON.stringify() in the body of the request.
If this video was helpful, please like and subscribe! You can follow me on:
Twitter: / hunterhchang
codebushi.com

[@OverwhelmingGrace]

I really like the way you take this step by step from the ground up. I've worked with fetch before but found that I really did not understand how it worked.

[@guchi3947]

I'm gonna cry, I have seen the light. Bless your soul, kind man.

[@user-dr3rj3gt2b]

GOAT! This guy explains everything better than any Udemy instructor

[@afsanazamannipa7711]

A big thumbs up for the clean demonstration of how the POST method works. Thanks.

[@arupsharma2792]

I am new to programming and learning Java Script....this is what exactly i was looking for.....Thanks!!!

[@andresacosta9824]

From Colombia to you let me tell you something...you Sir got my respects, not everybody knows how to explain this by walking through every detail so everybody becomes aware of how things fall into place the way you did...suscribed!!PD u r truly gifted btw keep it up

[@rickvazquez6578]

MATE! this tutorial is the bomb! I love how you actually walked through documentation! Thanks soo much!

[@codyfisher9972]

looked in a lot of places to try and get this explained and you by far have done it the best thank you

[@EliZevin]

thanks, i forgot how to do with without React and you saved my day

[@dfrecipes1138]

What a great tutorial... I've done a lot of middleware and backend stuff. but the front-end just confuses me. Just starting to figure out API calls. and this was such a great help... I copied everything as you spoke about it (had to pause a few times), and everything worked!!!!, so many other youTubers out there, and their code for some reason or another, just doesn't work. -- Yours worked great and really helped me. THANKS!!!

[@fluntimes]

A tutorial that doesn't leave the viewer with console.log(data). You figured out people actually want to do things with the data!

[@sksahilhossen8527]

oh dyr u r the savior.. i was doing console.log(data) and then data.forEach(e) and it ruins my whole day.. now i understand its console.log(data.data) and for iterating the array elements its data.data.forEach(e). thanks.. GOD bless you.

[@zohrarazaq8244]

THIS WAS AMAZING!!!! thanks so much for doing the tutorial in incremental stages and then displaying what happens on the HTML

[@drzacks]

Really helpful for me beginner. It really confusing if I just looking at finished codes but with your step by step coaching how you built it up, everything makes sense. Thank you for amazing tutorial!!

[@MystmaxkinnTV]

This is exactly what I was looking for good Sir. Thank you.

[@SahraClayton]

So glad I found this tutorial. As a beginner this was really helpful.

[@enriquesalomon8197]

Thanks for this video sir . You help me with my problem 😉. This is exactly what I am looking for 🙏

[@Landuytfamily]

I cannot express how much grateful I feel watching this tutorial. Super Precious!! Liked and subscribed. Please send me a link to learn async and await version. THANK YOU

[@spartanpenguin3351]

I love how you explain everything clearly, thank you! I subscribe, please continue sharing us your knowledge

[@Chickin]

ty dude

[@Warpgatez]

“Whoopsiiieeesss” 😂😂😂 great video. Never seen your content before but if they’re all like this then you have a great channel

[@jamblob3208]

fascinating. First step, step back.

[@Robcabobb]

Love this super easy to follow. Thank you!

[@gayanegrigoryan9565]

Great thanks, it was so helpful for my task!!!🤩🤩🤩

[@balajitech5263]

This is so useful man,plz post more video

[@mohammedh4844]

Excellent tutorial. Continue with more tutorial

[@MsRitika1990]

Please use axios async await...you don't have to use then again and again...looks neat too.. Video is too good..this is what I was looking for...

[@parsamarami5683]

thanks bro...useful ;)

[@neets7519]

Awesome tutorial 🧡 from Australia!

[@ioslearner9536]

Thank you so much sir... This video really helped me a lot. I am subscribing to your channel right now...

[@thayrangabriel2087]

Thanks so much for making this tuutorial!

[@sandeepkumarmahto5428]

Thanks sir I look for the exactly this solution..

[@nonodev]

That Tutorial is Gold. Thanks

[@basement_grower]

Nice video man, helped me out

[@sahil-ld1bu]

please make more tutorials on javaScript it will very helpful

[@itshamiiid]

thanks. this was helpful.

[@KANCHANADHIKRAOJADHAV]

Thanks alot sir!

[@athraafaraj8387]

thank you very useful

[@user-mishapagan]

thank you so much , it was a REAL help!! )

[@cantareiramartins55]

Thank you for the explanation!

[@verdynandreyhans9592]

you saved my day broh ....

[@amirhoxha6231]

Amazing video

[@justcats2184]

I love how u explain please make more tutorial videoss

[@adityaband6919]

Really nice video

[@cuadros9870]

I actually passed an interview after watching this video

[@chigozieemeafu4415]

it was an awesome lesson made easy.

[@Lyrik-Klinge]

Thanks!

[@HemmingEducation]

Great!

[@RocoSafreti]

👌

[@Smart.Potato]

7:44 I am getting Name: ${user.first_name}Name: ${user.first_name}Name: ${user.first_name}Name: ${user.first_name}Name: ${user.first_name} instead of actual names in API, I double checked and everything is the same as you typed. not sure what I'm doing wrong. could you help please.

[@matusbalogh7778]

This video is fantastic, exactly what I was looking for! Thank you! One question - I'm trying to only display the first result (in your example it's Name: George) but can't seem to be able to filter it out. I can't tell where I'm going wrong. Could you please advise on how to approach this? I'm sure it must be quite simple.

[@hikari1690]

Depending on the api, you may be able to add a query to return only one. Alternatively, understanding the returned object can allow you to manipulate it. For example, if it's an array you can just use index 0 to get the first item. I didnt finish watching the video cause it's too dry so I dont know what this api returns... But it's a month since your comment so I'm guessing you already got an answer by now anyways 😂

[@AD-lr6pc]

Wow great tutorial 👍

[@hchchc948]

How would you go about instantiating a new instance of a class with the properties of the fetched data? Awesome tutorial btw!

[@owltrades]

Thanks man

[@Jakobowsky]

Thanks a lot for this video!

[@fridalundstrom6212]

Great video! Do you have any suggestions on how to put the data into 3 separate divs that I allready have created in my HTML? The API I have contains three arrays, and I want to put each array in separate divs by using Javascript.

[@codebushi]

You probably need to split up the arrays and do a .map() three different times in each of your separate divs.

[@mariejolie2645]

I would love to know how to get a user by id in the url and display its infos by clicking on its avatar for instance. Any tutorial on this ? thanks

[@adminyork4397]

Can you make a video on how to create a pop-out modal when any of these users are selected and provide additional info about them in the modal? Also on your then method could you just do .them(data => console.log(data.data)) making it a one liner instead of 3? Thx for the video!

[@NelIglesiasPerez]

THANK YOU

[@user-mishapagan]

I have a question . If you had to display an average value for each user. How would you implement that into template literal? Is that even possible? I'm trying to accomplishe that atm and totally stuck :(

[@MehediHasanMondal]

Nice tutorial buddy

[@codebushi]

Thank you!

[@ltmanbonzo7762]

Can someone please tell me why it is not outputting on the html correctly for me? For example it is only outputting "Name: ${user.first_name}", instead of "Name: George"

[@ritsk4338]

Awesome video.

[@Asif78611]

What if we want return an integer value in the string literal. I tried but its showing undefined. Please help

[@ovidiublaga1]

Hello. Have you though about doing the pagination?

[@egel2787]

How can I display only the first id1 of database

[@pauloh.2503]

nice

[@IneyeGabriel]

How do we select the first child and add a class to it?

[@NuwanThisara]

Hello, thanks for the tutorial, but console says --- TypeError: data.data.map is not a function -- then what?

[@codebushi]

Hi! Can you share your code maybe with jsfiddle.net? Make sure you 'return' something in your first '.then()' and do a console.log of data first to see what the value is.

[@Univelz]

i receive error : TypeError: Cannot read properties of null (reading 'insertAdjacentHTML') message: 'Cannot read properties of null (reading 'insertAdjacentHTML')'} Why this happen even though i follow the tutorial?

[@codebushi]

If you can share your code, I can take a look!

[@Univelz]

@@codebushi my apprenticeship already end month ago and it solved already so yeah. Altho i dont remember the problem anymore

[@muhammadaqilal-muhtadi9185]

how to connect my fetch API code with other code ? so i can rendering data with the other code *i'm sorry if my language is so bad 🙏

[@Faisal-jo5vk]

what if i am not fetching a json file

[@Smart.Potato]

return 'Name: ${user.first_name} '; my VSCode is thinking this line as a whole string and does not understand ${} is JS. what do I do please Edit: ok I finally figured it out. I was trying ' instead of ` holy cow

[@r7butler]

Gotta love how Emma Wong turned out to be a white man seemingly in his late 20's

[@maliknauman7873]

how can we post image

[@ritsk4338]

please create a video on promise

[@engr.kingsleyfoncham2619]

im having some issues

[@codebushi]

Hi! What issues are you having?

[@alexmelka5324]

is it fucking so hard to make it at readable size ??

[@tamang1234]

why are u so handsome

[@negrocomdentebranco]

hello its possible to delete from a public API?