How to FETCH data from an API using JavaScript ↩️

Поділитися
Вставка
  • Опубліковано 28 вер 2024

КОМЕНТАРІ • 112

  • @BroCodez
    @BroCodez  9 місяців тому +50

    // 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 5 місяців тому

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

    • @Smurfis
      @Smurfis 3 місяці тому

      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 3 місяці тому

      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

  • @abinayag4050
    @abinayag4050 7 місяців тому +18

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

  • @AyandaGumede-q5t
    @AyandaGumede-q5t 8 місяців тому +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.

  • @NiceChange
    @NiceChange 2 місяці тому +4

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

  • @ShortSnickers101
    @ShortSnickers101 9 місяців тому +70

    Not only a progammer but also a pokemon fan.

  • @bekay7663
    @bekay7663 3 місяці тому +5

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

  • @Vincent_12770
    @Vincent_12770 9 місяців тому +12

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

    • @TheBlueDude71
      @TheBlueDude71 9 місяців тому +5

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

  • @eusoumateusrocha
    @eusoumateusrocha 7 місяців тому +3

    THIS IS THE BEST TUTORIAL IN UA-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 5 місяців тому +2

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

  • @JorgeHernandez-fo5kl
    @JorgeHernandez-fo5kl 9 місяців тому +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

  • @andrisalazar7565
    @andrisalazar7565 4 дні тому

    Very good explained! thanks!

  • @moeyk97
    @moeyk97 7 місяців тому +2

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

  • @drewxx8527
    @drewxx8527 9 місяців тому +2

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

  • @emir-mu1bs
    @emir-mu1bs 3 місяці тому

    definitely the best explanation I've ever watch

  • @uwayss_11
    @uwayss_11 Місяць тому

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

  • @nicktorius8910
    @nicktorius8910 Місяць тому +1

    groudon the goat honorable mention rayquaza

  • @user-lx8mh
    @user-lx8mh Місяць тому

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

  • @HuracanSeneca
    @HuracanSeneca 9 місяців тому +3

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

  • @luizhqdo
    @luizhqdo 23 дні тому

    very good, liked!

  • @2faststudios571
    @2faststudios571 2 місяці тому

    thanks, this video was super useful 😀

  • @regilearn2138
    @regilearn2138 4 місяці тому +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

  • @muhammadshazeel567
    @muhammadshazeel567 6 місяців тому

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

  • @rahimrahim2720
    @rahimrahim2720 2 місяці тому

    cool thanks you make it so easy

  • @ofekcohen6559
    @ofekcohen6559 9 місяців тому +5

    You will make node is course?

  • @vallunacoder.wecodetogether
    @vallunacoder.wecodetogether 8 місяців тому

    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 9 місяців тому +1

    PERFECT TIMINGGGG THANK YOUUUUUU

  • @vaibhavagarwal1479
    @vaibhavagarwal1479 3 місяці тому +3

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

  • @r-i-ch
    @r-i-ch 2 місяці тому

    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 Місяць тому

      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

  • @EuBrasileiro
    @EuBrasileiro 9 місяців тому +1

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

  • @watashiaashishgurung
    @watashiaashishgurung 11 днів тому

    Ty trainer 😊

  • @fume6970
    @fume6970 7 місяців тому

    The broest Bro I've ever had

  • @ajayxoxo
    @ajayxoxo 9 місяців тому +1

    the things i need right on time 😊😊

  • @lounes03b99
    @lounes03b99 5 місяців тому

    thank U to much Mr.Pokemon🔥❤‍🔥

  • @shaw848
    @shaw848 2 місяці тому

    good tutorial 👍

  • @_____vieve
    @_____vieve 6 днів тому

    THANKS

  • @nopass6247
    @nopass6247 9 місяців тому +1

    awesome, thanks bro 💕

  • @l213dhanesh3
    @l213dhanesh3 9 місяців тому +6

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

  • @erialgumacoisa
    @erialgumacoisa 8 місяців тому +1

    Thanks Bro

  • @QuadriCSGO
    @QuadriCSGO 8 місяців тому

    amazing tutorial man thanks

  • @پارساچاوشی-ب8خ
    @پارساچاوشی-ب8خ 9 місяців тому +1

    it was amazing

  • @haniehsolatpour8945
    @haniehsolatpour8945 4 місяці тому

    So nice

  • @sr.pinheiro6386
    @sr.pinheiro6386 9 місяців тому +1

    hey, can u do a ruby course ? pls

  • @sugganiggadeek
    @sugganiggadeek 9 місяців тому +3

    This comment was automated

  • @HammerBummer-ro9ik
    @HammerBummer-ro9ik Місяць тому +1

    perfect! Bro Code

  • @shafiulAlamShafi
    @shafiulAlamShafi 8 місяців тому

    Super helpful

  • @doronfeldman5152
    @doronfeldman5152 9 місяців тому

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

  • @aley681
    @aley681 9 місяців тому +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.

  • @lakivicsa
    @lakivicsa 7 місяців тому

    Thank you!

  • @ghost.-.1290
    @ghost.-.1290 9 місяців тому +1

    cool

  • @leo..81777
    @leo..81777 4 місяці тому

    👍👍👍

  • @sebs178
    @sebs178 3 дні тому

    minun!

  • @parikshitkolhe3295
    @parikshitkolhe3295 6 місяців тому

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

  • @weemarb
    @weemarb 8 місяців тому

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

  • @erialgumacoisa
    @erialgumacoisa 8 місяців тому +1

    NodeJS course pls

  • @eagledeluxe826
    @eagledeluxe826 9 місяців тому +1

    Make on lua pls

  • @2ameridiem
    @2ameridiem 7 місяців тому

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

  • @harbirdhillon8195
    @harbirdhillon8195 4 місяці тому

    Favorite Pokemon: Lugia

  • @youngtrouble00
    @youngtrouble00 9 місяців тому +1

    Do python next😢

  • @feelthesurge1003
    @feelthesurge1003 9 місяців тому

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

  • @JuanRobertoDejon-t6d
    @JuanRobertoDejon-t6d 9 місяців тому +1

    Dragonite :D

  • @manueljoseph3528
    @manueljoseph3528 5 місяців тому

    is it possible to do sorting

  • @Dhanasekar-l4t
    @Dhanasekar-l4t 9 місяців тому +2

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

  • @KiNGgamer-km4zi
    @KiNGgamer-km4zi 9 місяців тому +1

    Sir bro node js please

  • @notacupofmilk2021
    @notacupofmilk2021 2 місяці тому

    2:15

  • @talebmine6562
    @talebmine6562 5 місяців тому

    I wont text generating logo with AI

  • @hamzagohar2048
    @hamzagohar2048 2 місяці тому

    #utorial XD

  • @STR-DP
    @STR-DP 3 місяці тому

    Lucario

  • @Mr-MITRA
    @Mr-MITRA 6 місяців тому

    from today pikachu

  • @kichuofficial8887
    @kichuofficial8887 7 місяців тому

    charizard

  • @marouanebr409
    @marouanebr409 6 місяців тому

    (y) (y)

  • @alextruong1826
    @alextruong1826 5 місяців тому +7

    thank you for your video

    • @ay111nbg6
      @ay111nbg6 4 місяці тому

      well said , i feel the same .

  • @marouanebr409
    @marouanebr409 6 місяців тому

    👍👍👍👍

  • @gibbaren2552
    @gibbaren2552 9 місяців тому +2

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

  • @belgian_wolvie8875
    @belgian_wolvie8875 26 днів тому

    My favorite pokemon is jequavius

  • @alternate_fantasy
    @alternate_fantasy 5 місяців тому

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

  • @maxknight8542
    @maxknight8542 9 місяців тому +1

    are you able to teach php and sql

  • @SafiAbdulWajid
    @SafiAbdulWajid День тому

    awesome explanation

  • @codeJourneyGuides
    @codeJourneyGuides 6 місяців тому

    SpongeBob is still not a Pokemon lol 😂

  • @Elexir.189
    @Elexir.189 9 місяців тому +1

    I LOVE YOU BRO CODE 🤩🤩🤩

  • @Mr_hinch
    @Mr_hinch Місяць тому

    THANKS BRO!!!🙌🙏🙏

  • @Blitz61wasd
    @Blitz61wasd 9 місяців тому +1

    Cool

  • @programmated_brian
    @programmated_brian 9 місяців тому +1

    loved the content man.

  • @kyleshivers
    @kyleshivers 9 місяців тому +1

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

  • @zyntaXmods
    @zyntaXmods 8 місяців тому

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

  • @memeingthroughenglish7221
    @memeingthroughenglish7221 3 місяці тому

    definitely geodude. Thanks for making this fun.

  • @minh355
    @minh355 5 місяців тому

    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

  • @MiriamGordilloChavez
    @MiriamGordilloChavez 6 місяців тому

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

  • @danielwolks8494
    @danielwolks8494 4 місяці тому

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

  • @nicktorius8910
    @nicktorius8910 Місяць тому

    just finished every tutotial in this playlist

  • @larvey_
    @larvey_ 3 місяці тому

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

  • @valenciawalker6498
    @valenciawalker6498 6 місяців тому

    Thank you very helpful.

  • @capslock3250
    @capslock3250 9 місяців тому

    Kotlin or Golang course please.

  • @princesstechideas
    @princesstechideas 3 місяці тому

    Thanks bro.nice 😊😊😊😊😊 tutorial

  • @tthamil
    @tthamil 2 місяці тому

    super explanations bro

  • @addyjaime465
    @addyjaime465 4 місяці тому

    This guy is a legend

  • @muhammadyousaf2876
    @muhammadyousaf2876 7 місяців тому

    thank you alot