GET Data from API & Display in HTML with JavaScript Fetch API

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add auth to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 - Intro
0:44 - Get data with Fetch API (GET request)
3:07 - Display data by manipulating HTML / DOM with JavaScript
#fetchapi #fetch #fetchjavascript #javascript

[@ysammo214]

This is the video that finally made API's "click" for me. So concise and informative. Thankyou!

[@ustav_o]

jesus that may be the best tutorial ive ever seen about this. in only 5 minutes we got everything we need and also some extra really usefull knowledge. respect

[@abdulsaboor2004.]

I literally looked up entire YT, but couldn't find a single video that exactly teaches how to get and display data using API.
Luv u ♥

[@AAustinBB231]

subbed after one minute. concise, clear, and well explained.

[@Germane_5]

Excellent video. Straight to the point.
Kudos man.

[@nadiasaveljevas9447]

Thank you so much! Finally I have the API result in a multiple select in the HTML form!

[@ogzombiebreakfast]

Thank you! I've been trying to figure this out for a couple of days now.

[@yeic7434]

I never understood api's when they talked about them in college, now i have to work with them, so im doing some research and this 5 minute video made me understand them xD Thank bro keep it up!

[@twizzy8783]

yeah this explained the fundamentals so well, im glad i didn’t watch the 3 hour videos instead

[@samwisdomsa]

Very awesome video. Conscise and straingt to the point. Thamk's for saving my life after almost a week of trying and searching

[@jamiedoig9568]

Great catalogue of videos rich with content! Thank you very much for the tips

[@Habitual-Developer]

Really a perfect explanation. Professional flow😊😊

[@melissacouturier5644]

thank you for this video! was exactly what i was looking for

[@jB_s]

This is a solid video. Thanks for the good work!

[@-.-smile]

Thanks man. I was looking for this!

[@toastedclosure2770]

was looking for this! thank you

[@EgorKozjevnikov]

Thank you very much for an informative video, helped to continue with a task

[@t1910j]

Eye opening! Thank you very much

[@DivyanshMaurya-1]

Thanks bro, very nice and informative video

[@webprogrammingtutorials-alo69]

Very useful lesson. Thanks

[@tika6050]

Thanks for the tutorial sir. I appreciate it

[@kenzouframe]

YOU ARE A GOOD, MY KING, OMG This video solve my problem thanks my man

[@Bhavesh2003yt]

amazing api video ever thank you bro for this amazing video

[@lennertvangeert4249]

You saved my life at school today

[@aabirsabil4393]

Thank you for this awesome video

[@ramandamytv1193]

awesome vid! Thanks so much!

[@trooper3199]

Thank you very much 🫡

[@MrAgentjames]

Is there possibility to fetch data from ftp or local folder? Or on which sites can I automatically send files?

[@ggbin8092]

hi, i'm looking for a way to store api data in a variable, so that i can reuse it later. i'm not sure if this is the right way people do.

[@kennykenny6176]

Thank you

[@kurtismelkisoft4309]

What if I want to store this data in a variable and then use it later

[@sandeshjadhav7223]

thank you nice explanation

[@RonClarijs]

I think replacing forEach with map is better. Of course 'join("")' it afterwards and inject it in ul html element afterwards

[@joshuaoseiawuah1157]

that was what i was thinking too
i have always love to use map on arrays

[@GTOFFICIAL22]

Thank you so much man

[@codewithravi8549]

Thank you.

[@tia_____1891]

Can I use a route in place of url . I want to fetch data from mongo db .

[@myosotisalderson]

Hello :) thank you for your video, but there is a mistake, you should give a new variable and assign "Array.form(data), if you don't write this line, your code wont work. Thanks bro

[@Ebube_dee]

Please I have a question
When do you use fetch api

[@dimjim2365]

Great video. I did have a problem with line 22. Had to change to "" +user.name+ "" to get it to work. Otherwise it just quoted the line. I guess this is a browser difference or something.--- Update. Okay so I was using the wrong key. I thought it was the single quote key instead of the back tick or whatever you call it. Me Bad!

[@souravjoshishorts7199]

That's why he used $ sign for back tick

[@niyanth_reddy]

Is it good to fetch data from api and save it in database for a page that we load several times or use api directly?

[@ByteGrad]

It’s a lot more work with database

[@rizkijanuar205]

Thanks a lot sir 🙏, is there any website reference to learn the ( ` ) symbol ? I'm inserting the wrong symbol ( ' ) when declare "markup" variable on 3:52 😄

[@kvkcreations2313]

it is backtick available in keyboard below escape button

[@kvkcreations2313]

backtick ``

[@rizkijanuar205]

@@kvkcreations2313 Thank you so much sir 🙏

[@souravjoshishorts7199]

Its template literal

[@ByteGrad]

Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2
Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752

[@mahipalsingh816]

gd one

[@PaulPetrutoni]

Thanks!

[@ByteGrad]

Appreciate the Super Thanks! Thanks

[@lycanunleashed]

nice video but there is one thing i dont understand.. suppose we used async await to get the data.. how can we then use the same data in lets say 10 other functions without having to fetch the same data over and over again in all the functinos

[@ByteGrad]

Sorry too busy to give you a complete / good answer. You would just assign the data to an outside variable. I highly recommend to go through my Professional JavaScript course so these things become easy.

[@alamond3318]

You could cache the data. You can watch a tutorial on caching.

[@larryjasontueno9016]

Why none on these fetch tutorials explain how they create their api? Please

[@A--ti7vc]

bro I've been asking a question for a year, which made me confusing about my learning skills, or my brain IQ let me say, the question is : can I use the fetched data from the API outside the promise? this question is not just mine, there are many beginners have this questions, and had this question, if not all the leaners had asked this question yet, the main here is if u can do a video about that it will be really helpful, the answer with yes u can or not u can't will be helpful not just if there is a possibility, and thanks for reading this

[@thedarkshadoww9711]

Why not create a variable outside the scope of the fetch function and then when you receive the data just save it that variable. Since that variable is outside the fetch function, you can use it's data outside of the function.

[@neozoid7009]

Can I get Any Data from Any Website from this Method??

[@ranjitkr87]

Is this not compatible on webflow ? because it is showing ${user.name} instead of actual user name for each user

[@ByteGrad]

Interesting use case, I don’t know how to do this in Webflow

[@ranjitkr87]

@@ByteGrad Completely my mistake. Your solution works like charm. I used ' instead of `. Thanks a lot

[@rohithn8811]

Can we display a specific data using the id value??

[@ByteGrad]

You can fetch any data you like, yes

[@ric190720]

data already array, but when i add the "data.foreach...." is said is not a function

[@ByteGrad]

It’s forEach (with capital)

[@aceguevarra2893]

can i use append instead of insertAdjacentHTML?

[@ByteGrad]

Better to use insertAdjacentHTML if you have a string representing HTML.
We want to insert a string that will be parsed as HTML so we have to use insertAdjacentHTML, if you use append the string will simply be text and if you use appendChild you have to create an HTML-element / 'node' to insert first.

[@aceguevarra2893]

@@ByteGrad ohhh okay understood, thanks ♥️

[@ricardodelacrvz1400]

tried doing this for the pokemon api in my bootcamp it doesnt work

[@ByteGrad]

Any error messages?

[@Racine14]

But for I get an error said: data.forEach is not a function.

[@ByteGrad]

Check if data is actually an array (console.log it)

[@Racine14]

@@ByteGrad Thank you dear but I got where the error cames from. Within my foreach loop : data.ArrayName.forEach

[@somarble]

thanks but next time provide a link to API

[@BigWickVic]

how would I fetch only the data of an object thats not an array?

[@BigWickVic]

subscribed by the way

[@ByteGrad]

You would get the data the exact same way, but just handle it differently once you get it.

[@sanchitsharma2899]

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')
Its showing this error even I tried put the script tag below table tag but not working.

[@ByteGrad]

Seems like you didn’t select the HTML-element properly

[@sanchitsharma2899]

@@ByteGrad
Actually I am doing it for table(showing Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML'))- Can you help with this?
----------------------------------------------------------------




id
it
titile
body






async function fetchApi(){
let result = await fetch("jsonplaceholder.typicode.com/posts");
result = await result.json();
console.warn(result);
document.getElementById(data).innerHTML = result.map((data)=>(
`

${data.body}
${data.it}
${data.body}
${data.userId}
`
)).join();
}
fetchApi();

[@garyoak4175]

data.forEach is not a function (console error)

[@ByteGrad]

Check if data is actually an array: console.log(data) and see what you get

[@Mr.Fri3nd]

index.htm:13 Uncaught (in promise) TypeError: data.forEach is not a function

[@ByteGrad]

Try console.log(data) to see if you actually have an array

[@user-ne6cj9wi7e]

Ik hoor Nederlands

[@user-ku3zt3nd6l]

source code ?