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.

[@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

[@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😊😊

[@jB_s]

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

[@-.-smile]

Thanks man. I was looking for this!

[@melissacouturier5644]

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

[@toastedclosure2770]

was looking for this! thank you

[@DivyanshMaurya-1]

Thanks bro, very nice and informative video

[@t1910j]

Eye opening! Thank you very much

[@webprogrammingtutorials-alo69]

Very useful lesson. Thanks

[@EgorKozjevnikov]

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

[@Bhavesh2003yt]

amazing api video ever thank you bro for this amazing video

[@trooper3199]

Thank you very much 🫡

[@tika6050]

Thanks for the tutorial sir. I appreciate it

[@lennertvangeert4249]

You saved my life at school today

[@ramandamytv1193]

awesome vid! Thanks so much!

[@kenzouframe]

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

[@aabirsabil4393]

Thank you for this awesome video

[@kennykenny6176]

Thank you

[@GTOFFICIAL22]

Thank you so much man

[@sandeshjadhav7223]

thank you nice explanation

[@codewithravi8549]

Thank you.

[@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.

[@MrAgentjames]

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

[@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

[@tia_____1891]

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

[@kurtismelkisoft4309]

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

[@Ebube_dee]

Please I have a question
When do you use fetch api

[@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

[@PaulPetrutoni]

Thanks!

[@ByteGrad]

Appreciate the Super Thanks! Thanks

[@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

[@mahipalsingh816]

gd one

[@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.

[@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

[@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)

[@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.

[@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 ♥️

[@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();

[@neozoid7009]

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

[@ricardodelacrvz1400]

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

[@ByteGrad]

Any error messages?

[@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.

[@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

[@somarble]

thanks but next time provide a link to API

[@user-ne6cj9wi7e]

Ik hoor Nederlands

[@user-ku3zt3nd6l]

source code ?