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

[@ChuanyiXia]

とても役立つ内容でした！JavaScriptのFetch APIを使ってAPIからデータを取得し、HTMLに表示する手順が非常に分かりやすく説明されていました。特に初心者にとって、実践的な例が学習に役立つと思います。今後もこのような実用的な投稿を楽しみにしています！

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

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

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

[@PaulPetrutoni]

Thanks!

[@ByteGrad]

Appreciate the Super Thanks! Thanks

[@nadiasaveljevas9447]

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

[@samwisdomsa]

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

[@conceptualdeveloper]

Really a perfect explanation. Professional flow😊😊

[@hayadarwish3753]

Really Amazing explanation! Thank you so much ❤

[@Bhavesh2003yt]

amazing api video ever thank you bro for this amazing video

[@lennertvangeert4249]

You saved my life at school today

[@ogzombiebreakfast]

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

[@DivyanshMaurya-1]

Thanks bro, very nice and informative video

[@jB_s]

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

[@toastedclosure2770]

was looking for this! thank you

[@jamiedoig9568]

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

[@kenzouframe]

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

[@tika6050]

Thanks for the tutorial sir. I appreciate it

[@-.-smile]

Thanks man. I was looking for this!

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

[@deepchangani2004]

That's why he used $ sign for back tick

[@webprogrammingtutorials-alo69]

Very useful lesson. Thanks

[@melissacouturier5644]

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

[@sumdev4983]

Hi great vid, I subscribed. Question, what if I want to do something more than just console.log the data? What if I want to print it to another html page? Rarely does anyone just want to console.log the data. Thanks!

[@t1910j]

Eye opening! Thank you very much

[@aabirsabil4393]

Thank you for this awesome video

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

[@deepchangani2004]

Its template literal

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

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

[@trooper3199]

Thank you very much 🫡

[@ramandamytv1193]

awesome vid! Thanks so much!

[@kurtismelkisoft4309]

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

[@sandeshjadhav7223]

thank you nice explanation

[@tia_____1891]

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

[@Aida-s7f]

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

[@felipehernandez7938]

Good tutorial

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

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

[@rohithn8811]

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

[@ByteGrad]

You can fetch any data you like, yes

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

[@GTOFFICIAL22]

Thank you so much man

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

[@Ebube_dee]

Please I have a question When do you use fetch api

[@kennykenny6176]

Thank you

[@codewithravi8549]

Thank you.

[@StolenX]

having a problem with displaying my data

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

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

[@larryjasontueno9016]

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

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

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

[@neozoid7009]

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

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

[@ricardomartinhodacruz]

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

[@ByteGrad]

Any error messages?

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

[@mahipalsingh816]

gd one

[@somarble]

thanks but next time provide a link to API

[@T229-d7k]

Ik hoor Nederlands

[@halekhyaachula]

source code ?

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