How to FETCH data from an API using JavaScript ↩️

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ม.ค. 2025

ความคิดเห็น • 142

  • @BroCodez
    @BroCodez  ปีที่แล้ว +62

    // 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
      @talebmine6562 9 หลายเดือนก่อน

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

    • @Smurfis
      @Smurfis 8 หลายเดือนก่อน

      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
      @Smurfis 8 หลายเดือนก่อน

      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

  • @alextruong1826
    @alextruong1826 9 หลายเดือนก่อน +17

    thank you for your video

    • @ay111nbg6
      @ay111nbg6 8 หลายเดือนก่อน

      well said , i feel the same .

  • @coding6291
    @coding6291 2 หลายเดือนก่อน +8

    Fun Tutorial, really enjoyed it! Using Pokemon made it so much better than some other boring data.

  • @AyandaGumede-q5t
    @AyandaGumede-q5t ปีที่แล้ว +19

    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.

  • @ShortSnickers101
    @ShortSnickers101 ปีที่แล้ว +91

    Not only a progammer but also a pokemon fan.

    • @Th3Coder
      @Th3Coder ปีที่แล้ว +2

      Same 🙂

    • @alternate_fantasy
      @alternate_fantasy 9 หลายเดือนก่อน +1

      So what ?

    • @diegocamacho6060
      @diegocamacho6060 9 หลายเดือนก่อน +5

      @@alternate_fantasy ur mom

    • @alternate_fantasy
      @alternate_fantasy 9 หลายเดือนก่อน

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

    • @diegocamacho6060
      @diegocamacho6060 9 หลายเดือนก่อน +6

      @@alternate_fantasy ur mom

  • @NiceChange
    @NiceChange 7 หลายเดือนก่อน +5

    I really enjoy the way you explain how you are writing the code and why. Very informative and you make it intuitive. Great work!

  • @falakchudasama9746
    @falakchudasama9746 3 หลายเดือนก่อน +2

    Perfect tutorial, perfect teaching, perfect free api

  • @abinayag4050
    @abinayag4050 ปีที่แล้ว +20

    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😇😇😇😇

  • @eusoumateusrocha
    @eusoumateusrocha 11 หลายเดือนก่อน +4

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

  • @bekay7663
    @bekay7663 7 หลายเดือนก่อน +8

    using the pokemon api was a good choice for a introduction to fetch

  • @RJ100
    @RJ100 9 หลายเดือนก่อน +3

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

  • @kopilkaiser8991
    @kopilkaiser8991 3 หลายเดือนก่อน

    Thank you BroCodez! You are an angel to us new programmers 😊. I am sure all the newcomers will find this video extremely helpful 👍🏼

  • @catherinesalazar2113
    @catherinesalazar2113 หลายเดือนก่อน

    Unreal! So well explained, simple and FUN! +1 subscriber ♥

  • @JorgeHernandez-fo5kl
    @JorgeHernandez-fo5kl ปีที่แล้ว +4

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

  • @briman113
    @briman113 2 หลายเดือนก่อน

    Enjoyed working along with this tutorial. All I can say is 👍

  • @Vincent_12770
    @Vincent_12770 ปีที่แล้ว +14

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

    • @TheBlueDude71
      @TheBlueDude71 ปีที่แล้ว +5

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

  • @moeyk97
    @moeyk97 11 หลายเดือนก่อน +2

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

  • @uwayss_11
    @uwayss_11 5 หลายเดือนก่อน

    This bro is a HERO!!! 🔥🙏🙏👏👏👏👏

  • @emir-mu1bs
    @emir-mu1bs 7 หลายเดือนก่อน

    definitely the best explanation I've ever watch

  • @vallunacoder.wecodetogether
    @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!

  • @muhammadshazeel567
    @muhammadshazeel567 10 หลายเดือนก่อน

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

  • @4soulsz
    @4soulsz ปีที่แล้ว +1

    PERFECT TIMINGGGG THANK YOUUUUUU

  • @mustafamontaser4955
    @mustafamontaser4955 หลายเดือนก่อน

    You have made my day. Thanks a lot

  • @larvey_
    @larvey_ 8 หลายเดือนก่อน

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

  • @SafiAbdulWajid
    @SafiAbdulWajid 4 หลายเดือนก่อน

    awesome explanation

  • @user-lx8mh
    @user-lx8mh 5 หลายเดือนก่อน

    Thanks for the help! Got everything working on my weather project now I just need to finish the CSS

  • @khadvane
    @khadvane 18 วันที่ผ่านมา

    Thank you for the video

  • @andrisalazar7565
    @andrisalazar7565 4 หลายเดือนก่อน

    Very good explained! thanks!

  • @drewxx8527
    @drewxx8527 ปีที่แล้ว +2

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

  • @nicktorius8910
    @nicktorius8910 5 หลายเดือนก่อน

    just finished every tutotial in this playlist

  • @CôngVinhPhạm-e6o
    @CôngVinhPhạm-e6o 2 หลายเดือนก่อน

    So great

  • @luizhqdo
    @luizhqdo 4 หลายเดือนก่อน

    very good, liked!

  • @programmated_brian
    @programmated_brian ปีที่แล้ว +1

    loved the content man.

  • @shaw848
    @shaw848 6 หลายเดือนก่อน

    good tutorial 👍

  • @janardhan2jordan
    @janardhan2jordan 8 หลายเดือนก่อน +3

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

  • @learn...7065
    @learn...7065 หลายเดือนก่อน

    @BroCodez super project do more 5 more projects basic to depth
    ❤❤❤❤❤❤❤❤❤❤

  • @addyjaime465
    @addyjaime465 9 หลายเดือนก่อน

    This guy is a legend

  • @princesstechideas
    @princesstechideas 7 หลายเดือนก่อน

    Thanks bro.nice 😊😊😊😊😊 tutorial

  • @2faststudios571
    @2faststudios571 6 หลายเดือนก่อน

    thanks, this video was super useful 😀

  • @ajayxoxo
    @ajayxoxo ปีที่แล้ว +1

    the things i need right on time 😊😊

  • @danielwolks8494
    @danielwolks8494 8 หลายเดือนก่อน +1

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

  • @fume6970
    @fume6970 11 หลายเดือนก่อน

    The broest Bro I've ever had

  • @gibbaren2552
    @gibbaren2552 ปีที่แล้ว +2

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

  • @JboscoCSGO
    @JboscoCSGO ปีที่แล้ว

    amazing tutorial man thanks

  • @haniehsolatpour8945
    @haniehsolatpour8945 8 หลายเดือนก่อน

    So nice

  • @Mr_hinch
    @Mr_hinch 6 หลายเดือนก่อน

    THANKS BRO!!!🙌🙏🙏

  • @tthamil
    @tthamil 6 หลายเดือนก่อน

    super explanations bro

  • @nopass6247
    @nopass6247 ปีที่แล้ว +1

    awesome, thanks bro 💕

  • @Elexir.189
    @Elexir.189 ปีที่แล้ว +1

    I LOVE YOU BRO CODE 🤩🤩🤩

  • @lounes03b99
    @lounes03b99 9 หลายเดือนก่อน

    thank U to much Mr.Pokemon🔥❤‍🔥

  • @SushiK994
    @SushiK994 3 หลายเดือนก่อน

    thank you man

  • @ChuanyiXia
    @ChuanyiXia หลายเดือนก่อน +1

    とても分かりやすい投稿ですね!JavaScriptを使ってAPIからデータをフェッチする方法について、具体的なコード例が参考になりました。実践に役立ちそうです。ありがとうございます!

    • @oritrabelsi4030
      @oritrabelsi4030 หลายเดือนก่อน

      俺にもよく役立つくらいになりますね
      プログラミングの道はかなり難しくてけれどモチベーションがあれば人間として俺たちが何でも出来るとおもいますよ

  • @underwhip5
    @underwhip5 3 หลายเดือนก่อน +4

    That typhlosion endpoint did not age well. If you know you know

  • @shafiulAlamShafi
    @shafiulAlamShafi ปีที่แล้ว

    Super helpful

  • @watashiaashishgurung
    @watashiaashishgurung 4 หลายเดือนก่อน

    Ty trainer 😊

  • @regilearn2138
    @regilearn2138 8 หลายเดือนก่อน +1

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

  • @memeingthroughenglish7221
    @memeingthroughenglish7221 7 หลายเดือนก่อน

    definitely geodude. Thanks for making this fun.

  • @rahimrahim2720
    @rahimrahim2720 6 หลายเดือนก่อน

    cool thanks you make it so easy

  • @_4p_
    @_4p_ 4 หลายเดือนก่อน

    👍thanks man

  • @valenciawalker6498
    @valenciawalker6498 10 หลายเดือนก่อน

    Thank you very helpful.

  • @Resolvente
    @Resolvente ปีที่แล้ว +1

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

  • @marouanebr409
    @marouanebr409 10 หลายเดือนก่อน

    👍👍👍👍

  • @HuracanSeneca
    @HuracanSeneca ปีที่แล้ว +3

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

  • @پارساچاوشی-ب8خ
    @پارساچاوشی-ب8خ ปีที่แล้ว +1

    it was amazing

  • @erialgumacoisa
    @erialgumacoisa ปีที่แล้ว +1

    Thanks Bro

  • @lakivicsa
    @lakivicsa 11 หลายเดือนก่อน

    Thank you!

  • @BijouBakson
    @BijouBakson 3 หลายเดือนก่อน

    Thank you

  • @ofekcohen6559
    @ofekcohen6559 ปีที่แล้ว +5

    You will make node is course?

  • @kyleshivers
    @kyleshivers ปีที่แล้ว +1

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

  • @nicktorius8910
    @nicktorius8910 5 หลายเดือนก่อน +1

    groudon the goat honorable mention rayquaza

  • @r-i-ch
    @r-i-ch 6 หลายเดือนก่อน

    Great stuff.
    2questions - is using the straight form data a security risk from injection attacks?
    How would you stop and abort or prevent too many requests at once?

    • @lolxnn
      @lolxnn 5 หลายเดือนก่อน

      For XSS make sure that you don't use innerHTML for inserting data in the DOM. You can use innerText or setHTML if you need to insert html as setHTML sanitize the input

  • @_____vieve
    @_____vieve 4 หลายเดือนก่อน

    THANKS

  • @HammerBummer-ro9ik
    @HammerBummer-ro9ik 5 หลายเดือนก่อน +1

    perfect! Bro Code

  • @Blitz61wasd
    @Blitz61wasd ปีที่แล้ว +1

    Cool

  • @MiriamGordilloChavez
    @MiriamGordilloChavez 10 หลายเดือนก่อน

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

  • @muhammadyousaf2876
    @muhammadyousaf2876 11 หลายเดือนก่อน

    thank you alot

  • @2ameridiem
    @2ameridiem 11 หลายเดือนก่อน

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

  • @Anon01X
    @Anon01X วันที่ผ่านมา

    I always get so caught up use the data to display an image or whatnot and then miss the lesson....

  • @johnlloydtenido6915
    @johnlloydtenido6915 2 หลายเดือนก่อน

    can you do a vue or react tutorial ?

  • @doronfeldman5152
    @doronfeldman5152 ปีที่แล้ว

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

  • @sr.pinheiro6386
    @sr.pinheiro6386 ปีที่แล้ว +1

    hey, can u do a ruby course ? pls

  • @maxknight8542
    @maxknight8542 ปีที่แล้ว +1

    are you able to teach php and sql

  • @zyntaXmods
    @zyntaXmods ปีที่แล้ว

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

  • @aley681
    @aley681 ปีที่แล้ว +1

    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.

  • @ghost.-.1290
    @ghost.-.1290 ปีที่แล้ว +1

    cool

  • @AlexandreChar
    @AlexandreChar หลายเดือนก่อน

    Can you please make a video like this in c++

  • @feelthesurge1003
    @feelthesurge1003 ปีที่แล้ว

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

  • @parikshitkolhe3295
    @parikshitkolhe3295 10 หลายเดือนก่อน

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

  • @sebs178
    @sebs178 4 หลายเดือนก่อน

    minun!

  • @minh355
    @minh355 9 หลายเดือนก่อน

    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

    • @IAmNOTTHEBODY
      @IAmNOTTHEBODY 4 หลายเดือนก่อน +1

      By running the code and looking at the responses the console gives in your browser or vscode

  • @erialgumacoisa
    @erialgumacoisa ปีที่แล้ว +1

    NodeJS course pls

  • @l213dhanesh3
    @l213dhanesh3 ปีที่แล้ว +8

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

  • @manueljoseph3528
    @manueljoseph3528 9 หลายเดือนก่อน

    is it possible to do sorting

  • @prateet_tiwarii
    @prateet_tiwarii หลายเดือนก่อน

    THe Api's were fetching too slow on safari I thought I have error in my code but then switched to chrome then it worked smooth

  • @weemarb
    @weemarb ปีที่แล้ว

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

  • @Dhanasekar-l4t
    @Dhanasekar-l4t ปีที่แล้ว +2

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

  • @youngtrouble00
    @youngtrouble00 ปีที่แล้ว +1

    Do python next😢

  • @eagledeluxe826
    @eagledeluxe826 ปีที่แล้ว +1

    Make on lua pls

  • @talebmine6562
    @talebmine6562 9 หลายเดือนก่อน

    I wont text generating logo with AI

  • @JuanRobertoDejon-t6d
    @JuanRobertoDejon-t6d ปีที่แล้ว +1

    Dragonite :D