How to FETCH data from an API using JavaScript ↩️

#javascript #utorial #course
00:00:00 fetch
00:06:29 async/await
00:08:55 project
// fetch = Function used for making HTTP requests to fetch resources.
// (JSON style data, images, files)
// Simplifies asynchronous data fetching in JavaScript and
// used for interacting with APIs to retrieve and send
// data asynchronously over the web.
// fetch(url, {options})
async function fetchData(){
try{
const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
const response = await fetch(`pokeapi.co/api/v2/pokemon/${pokemonName}`);
if(!response.ok){
throw new Error("Could not fetch resource");
}
const data = await response.json();
const pokemonSprite = data.sprites.front_default;
const imgElement = document.getElementById("pokemonSprite");
imgElement.src = pokemonSprite;
imgElement.style.display = "block";
}
catch(error){
console.error(error);
}
}

[@BroCodez]

// fetch = Function used for making HTTP requests to fetch resources. // (JSON style data, images, files) // Simplifies asynchronous data fetching in JavaScript and // used for interacting with APIs to retrieve and send // data asynchronously over the web. // fetch(url, {options}) async function fetchData(){ try{ const pokemonName = document.getElementById("pokemonName").value.toLowerCase(); const response = await fetch(`pokeapi.co/api/v2/pokemon/${pokemonName}`); if(!response.ok){ throw new Error("Could not fetch resource"); } const data = await response.json(); const pokemonSprite = data.sprites.front_default; const imgElement = document.getElementById("pokemonSprite"); imgElement.src = pokemonSprite; imgElement.style.display = "block"; } catch(error){ console.error(error); } } Document Fetch Pokemon

[@talebmine6562]

Thanks, can you help me? I want the code to give me the logo

[@Smurfis]

I learn by using fun projects perhaps you could teach us how to make a little button based two player react game with this or something bro?

[@Smurfis]

Have always loved your videos thanks for this one particularly cos it’s exactly how I learn constants down, if not statement down variables being called down it’s sick thank you

[@vaibhavagarwal1479]

Alternative Title :- Bro Code flexing his knowledge about pokemon's.

[@yassinezammouri2955]

Not only a progammer but also a pokemon fan.

[@Th3Coder]

Same 🙂

[@alternate_fantasy]

So what ?

[@diegocamacho6060]

@@alternate_fantasy ur mom

[@alternate_fantasy]

@@diegocamacho6060 dont be sad kid :( im sorry for your life

[@diegocamacho6060]

@@alternate_fantasy ur mom

[@user-rw4cj8hp1p]

From the buttom of my heart, and on behalf of everyone. i would like to thank you so much bro….. been struggling for months with this!!!😭❤️🙏🏾. Hoping to receive a reactJS one. Once again, thank you.

[@alextruong1826]

thank you for your video

[@ay111nbg6]

well said , i feel the same .

[@abinayag4050]

in my bottom of the heart i really appreciate you. here lot of middle class student like me. your tutorial helped me alot without any fee. thanks keep going. i expected more tutorial from you😇😇😇😇

[@JorgeHernandez-fo5kl]

i really enjoy all of your videos bro, you helped me a lot with this course, thank you! Psd: lucario is my fav pokemon

[@RJ100]

bro you're a legend. thank you for making code easier to learn.

[@larvey_]

I really thank you for your on-point tutorial really helping me advance my lil skills

[@QuadriCSGO]

amazing tutorial man thanks

[@muhammadshazeel567]

i watch many tutorials on this topic but didn't understand it thanks for your video now i am finally understand it

[@eusoumateusrocha]

THIS IS THE BEST TUTORIAL IN KZbin ABOUT THIS. And my favorite pokemon is cyndaquil so when you said Typhlosion I was like whaaaaaaaaaaaaat! What are the odds? hahaha

[@moeyk97]

Amazing tutorial I’m gonna try this, style it nicely and flex on my class lmaooo

[@Vincent_12770]

this isn't included in your full Javascript course but i appreciate your efforts for doing it seperate

[@TheBlueDude71]

His full Javascript course was made awhile ago, this is a new updated version of that course.

[@vallunacoder.wecodetogether]

Bro I made it 🤩🤩🤸‍♀🤸‍♀, the think is I just want to keep watching your videos. I thought I would never understand Java script.Hopefully this year I'm going to be able to make it! Send you a hug!

[@valenciawalker6498]

Thank you very helpful.

[@4soulsz]

PERFECT TIMINGGGG THANK YOUUUUUU

[@shafiulAlamShafi]

Super helpful

[@lounes03b99]

thank U to much Mr.Pokemon🔥❤‍🔥

[@lakivicsa]

Thank you!

[@haniehsolatpour8945]

So nice

[@danielwolks8494]

This was a better explanation of fetch then the shit they have on codecademy

[@addyjaime465]

This guy is a legend

[@ajayxoxo]

the things i need right on time 😊😊

[@nopass6247]

awesome, thanks bro 💕

[@erialgumacoisa]

Thanks Bro

[@fume6970]

The broest Bro I've ever had

[@drewxx8527]

To be honest I was about to look for JavaScript form, about fetching and yes good counter I found this video xD

[@programmated_brian]

loved the content man.

[@gibbaren2552]

Keep the good work up! It would be so appreciated if you did a beginner course on Rust all love

[@muhammadyousaf2876]

thank you alot

[@HuracanSeneca]

If she aint into me like he is into Typhlosion, I don’t want it!

[@G.R.B.000]

I LOVE YOU BRO CODE 🤩🤩🤩

[@user-fs5np2et9g]

it was amazing

[@leo..81777]

👍👍👍

[@regilearn2138]

if you can please do axios video also and how to handle express error objects meaningful status code error massages in real world app

[@marouanebr409]

👍👍👍👍

[@kyleshivers]

I wish I found Bro Code earlier in my ‘teaching myself to code’ journey

[@user-mk2md9pu5m]

Cool

[@ghost.-.1290]

cool

[@EuBrasileiro]

Please teach us lua in 2024!!! thanks for your content

[@doronfeldman5152]

Hi bro, are you going to do a go course in the future?

[@user-jd2tt1vx3s]

bro please do php crud operation video please make as soon as possible

[@minh355]

For the first part, are the html and css files empty? I would assume so, but then how do you run JS in the console

[@feelthesurge1003]

hello bro will their be any more videos on React JS?

[@MiriamGordilloChavez]

Question: what if we would not prefer to use async and await? how do we display the image with the fetch?

[@2ameridiem]

should we not add an else block after checking response.ok property?

[@anonym-6114]

Hey Bro, this question has actually nothing to do with this video but I’ve got a project where I have to implement the best move of the computer in the game TicTacToe. I just started to learn java but that’s quite hard. Do you have some tips for me? The computer has to try to defeat me and block me by placing the symbol to places wherever I could win. I hope that you will answer. Hava a nice day.

[@ofekcohen6559]

You will make node is course?

[@parikshitkolhe3295]

Oh my god....what were the chances....even typhlosion is my favourite pokemon...

[@sr.pinheiro6386]

hey, can u do a ruby course ? pls

[@weemarb]

my favorite pokemon is breloom I like using him to kidnap other pokemon

[@MjRaj-hx2cu]

This comment was automated

[@maxknight8542]

are you able to teach php and sql

[@user-vl9nt6mo9s]

Dragonite :D

[@l213dhanesh3]

Code bro react bro.... My life bro.... My heart bro.... Plz bro do bro......

[@erialgumacoisa]

NodeJS course pls

[@harbirdhillon8195]

Favorite Pokemon: Lugia

[@zyntaXmods]

How can i access object in an api and display on html I'm getting type error 😢

[@eagledeluxe826]

Make on lua pls

[@manueljoseph3528]

is it possible to do sorting

[@codeJourneyGuides]

SpongeBob is still not a Pokemon lol 😂

[@gamingwithyoungtrouble]

Do python next😢

[@talebmine6562]

I wont text generating logo with AI

[@alternate_fantasy]

Quite not fair for a very basic and general video got such views.

[@Mr-MITRA]

from today pikachu

[@KiNGgamer-km4zi]

Sir bro node js please

[@capslock3250]

Kotlin or Golang course please.

[@kichuofficial8887]

charizard

[@marouanebr409]

(y) (y)