How to FETCH data from an API using JavaScript ↩️

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 พ.ย. 2024

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

  • @BroCodez
    @BroCodez  10 หลายเดือนก่อน +55

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

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

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

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

      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

  • @coding6291
    @coding6291 3 วันที่ผ่านมา +2

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

  • @alextruong1826
    @alextruong1826 7 หลายเดือนก่อน +10

    thank you for your video

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

      well said , i feel the same .

  • @AyandaGumede-q5t
    @AyandaGumede-q5t 10 หลายเดือนก่อน +17

    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 10 หลายเดือนก่อน +82

    Not only a progammer but also a pokemon fan.

    • @Th3Coder
      @Th3Coder 10 หลายเดือนก่อน +2

      Same 🙂

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

      So what ?

    • @diegocamacho6060
      @diegocamacho6060 7 หลายเดือนก่อน +4

      @@alternate_fantasy ur mom

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

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

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

      @@alternate_fantasy ur mom

  • @NiceChange
    @NiceChange 4 หลายเดือนก่อน +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!

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

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

  • @abinayag4050
    @abinayag4050 9 หลายเดือนก่อน +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😇😇😇😇

  • @kopilkaiser8991
    @kopilkaiser8991 27 วันที่ผ่านมา

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

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

    Perfect tutorial, perfect teaching, perfect free api

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

  • @RJ100
    @RJ100 7 หลายเดือนก่อน +2

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

  • @Vincent_12770
    @Vincent_12770 10 หลายเดือนก่อน +13

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

    • @TheBlueDude71
      @TheBlueDude71 10 หลายเดือนก่อน +5

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

  • @JorgeHernandez-fo5kl
    @JorgeHernandez-fo5kl 10 หลายเดือนก่อน +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

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

    definitely the best explanation I've ever watch

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

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

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

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

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

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

  • @drewxx8527
    @drewxx8527 10 หลายเดือนก่อน +2

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

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

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

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

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

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

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

  • @vaibhavagarwal1479
    @vaibhavagarwal1479 5 หลายเดือนก่อน +3

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

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

    just finished every tutotial in this playlist

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

    Very good explained! thanks!

  • @HuracanSeneca
    @HuracanSeneca 10 หลายเดือนก่อน +3

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

  • @vallunacoder.wecodetogether
    @vallunacoder.wecodetogether 9 หลายเดือนก่อน

    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!

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

    PERFECT TIMINGGGG THANK YOUUUUUU

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

    definitely geodude. Thanks for making this fun.

  • @gibbaren2552
    @gibbaren2552 10 หลายเดือนก่อน +2

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

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

    thanks, this video was super useful 😀

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

    This guy is a legend

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

    awesome explanation

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

    The broest Bro I've ever had

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

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

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

    the things i need right on time 😊😊

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

    groudon the goat honorable mention rayquaza

  • @CôngVinhPhạm-e6o
    @CôngVinhPhạm-e6o 14 วันที่ผ่านมา

    So great

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

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

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

    thank U to much Mr.Pokemon🔥❤‍🔥

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

    super explanations bro

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

    very good, liked!

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

    cool thanks you make it so easy

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

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

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

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

      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

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

    Thanks bro.nice 😊😊😊😊😊 tutorial

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

    good tutorial 👍

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

    awesome, thanks bro 💕

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

    Thank you very helpful.

  • @Elexir.189
    @Elexir.189 10 หลายเดือนก่อน +1

    I LOVE YOU BRO CODE 🤩🤩🤩

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

    THANKS BRO!!!🙌🙏🙏

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

    amazing tutorial man thanks

  • @پارساچاوشی-ب8خ
    @پارساچاوشی-ب8خ 10 หลายเดือนก่อน +1

    it was amazing

  • @l213dhanesh3
    @l213dhanesh3 10 หลายเดือนก่อน +8

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

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

    loved the content man.

  • @ofekcohen6559
    @ofekcohen6559 10 หลายเดือนก่อน +5

    You will make node is course?

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

    thank you man

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

    So nice

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

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

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

    Cool

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

    Ty trainer 😊

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

    Super helpful

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

    👍👍👍👍

  • @regilearn2138
    @regilearn2138 5 หลายเดือนก่อน +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

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

    Thank you

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

    👍thanks man

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

    THANKS

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

    Thank you!

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

    Thanks Bro

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

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

  • @ghost.-.1290
    @ghost.-.1290 10 หลายเดือนก่อน +1

    cool

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

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

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

    perfect! Bro Code

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

    thank you alot

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

    are you able to teach php and sql

  • @sr.pinheiro6386
    @sr.pinheiro6386 10 หลายเดือนก่อน +1

    hey, can u do a ruby course ? pls

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

    minun!

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

    My favorite pokemon is jequavius

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

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

  • @aley681
    @aley681 10 หลายเดือนก่อน +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.

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

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

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

    Favorite Pokemon: Lugia

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

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

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

    NodeJS course pls

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

    Do python next😢

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

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

  • @JuanRobertoDejon-t6d
    @JuanRobertoDejon-t6d 10 หลายเดือนก่อน +1

    Dragonite :D

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

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

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

    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 หลายเดือนก่อน +1

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

  • @raghabpandit2610
    @raghabpandit2610 3 วันที่ผ่านมา

    TypeError: Cannot read properties of undefined (reading 'front_default')

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

    is it possible to do sorting

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

    Make on lua pls

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

    2:15

  • @Mr-MITRA
    @Mr-MITRA 8 หลายเดือนก่อน

    from today pikachu

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

    I wont text generating logo with AI

  • @KiNGgamer-km4zi
    @KiNGgamer-km4zi 10 หลายเดือนก่อน +1

    Sir bro node js please

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

    SpongeBob is still not a Pokemon lol 😂

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

    Kotlin or Golang course please.

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

    #utorial XD

  • @Dhanasekar-l4t
    @Dhanasekar-l4t 10 หลายเดือนก่อน +2

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