Fetch API & Rendering Data with JavaScript

Поділитися
Вставка
  • Опубліковано 17 січ 2025

КОМЕНТАРІ • 98

  • @OverwhelmingGrace
    @OverwhelmingGrace Рік тому +1

    I really like the way you take this step by step from the ground up. I've worked with fetch before but found that I really did not understand how it worked.

  • @rickvazquez6578
    @rickvazquez6578 4 роки тому +8

    MATE! this tutorial is the bomb! I love how you actually walked through documentation! Thanks soo much!

  • @afsanazamannipa7711
    @afsanazamannipa7711 3 роки тому

    A big thumbs up for the clean demonstration of how the POST method works. Thanks.

  • @user-dr3rj3gt2b
    @user-dr3rj3gt2b 3 роки тому

    GOAT! This guy explains everything better than any Udemy instructor

  • @zohrarazaq8244
    @zohrarazaq8244 4 роки тому +6

    THIS WAS AMAZING!!!! thanks so much for doing the tutorial in incremental stages and then displaying what happens on the HTML

  • @codyfisher9972
    @codyfisher9972 2 роки тому

    looked in a lot of places to try and get this explained and you by far have done it the best thank you

  • @andresacosta9824
    @andresacosta9824 3 роки тому

    From Colombia to you let me tell you something...you Sir got my respects, not everybody knows how to explain this by walking through every detail so everybody becomes aware of how things fall into place the way you did...suscribed!!PD u r truly gifted btw keep it up

  • @guchi3947
    @guchi3947 2 роки тому

    I'm gonna cry, I have seen the light. Bless your soul, kind man.

  • @drzacks
    @drzacks 4 роки тому +1

    Really helpful for me beginner. It really confusing if I just looking at finished codes but with your step by step coaching how you built it up, everything makes sense. Thank you for amazing tutorial!!

  • @EliZevin
    @EliZevin 2 роки тому

    thanks, i forgot how to do with without React and you saved my day

  • @fluntimes
    @fluntimes 3 роки тому

    A tutorial that doesn't leave the viewer with console.log(data). You figured out people actually want to do things with the data!

  • @arupsharma2792
    @arupsharma2792 2 роки тому

    I am new to programming and learning Java Script....this is what exactly i was looking for.....Thanks!!!

  • @dfrecipes1138
    @dfrecipes1138 3 роки тому +1

    What a great tutorial... I've done a lot of middleware and backend stuff. but the front-end just confuses me. Just starting to figure out API calls. and this was such a great help... I copied everything as you spoke about it (had to pause a few times), and everything worked!!!!, so many other youTubers out there, and their code for some reason or another, just doesn't work.
    -- Yours worked great and really helped me. THANKS!!!

  • @MystmaxkinnTV
    @MystmaxkinnTV 3 роки тому +2

    This is exactly what I was looking for good Sir.
    Thank you.

  • @SahraClayton
    @SahraClayton 4 роки тому +2

    So glad I found this tutorial. As a beginner this was really helpful.

  • @Phalanx3351
    @Phalanx3351 4 роки тому +1

    I love how you explain everything clearly, thank you! I subscribe, please continue sharing us your knowledge

  • @sksahilhossen8527
    @sksahilhossen8527 3 роки тому

    oh dyr u r the savior.. i was doing console.log(data) and then data.forEach(e) and it ruins my whole day..
    now i understand its console.log(data.data) and for iterating the array elements its data.data.forEach(e). thanks.. GOD bless you.

  • @Chickin
    @Chickin 3 роки тому +1

    ty dude

  • @mohammedh4844
    @mohammedh4844 2 роки тому

    Excellent tutorial. Continue with more tutorial

  • @Warpgatez
    @Warpgatez 3 роки тому

    “Whoopsiiieeesss” 😂😂😂 great video. Never seen your content before but if they’re all like this then you have a great channel

  • @enriquesalomon8197
    @enriquesalomon8197 4 роки тому +3

    Thanks for this video sir . You help me with my problem 😉. This is exactly what I am looking for 🙏

  • @neets7519
    @neets7519 3 роки тому

    Awesome tutorial 🧡 from Australia!

  • @Robcabobb
    @Robcabobb 2 роки тому

    Love this super easy to follow. Thank you!

  • @balajitech5263
    @balajitech5263 3 роки тому

    This is so useful man,plz post more video

  • @gayanegrigoryan9565
    @gayanegrigoryan9565 2 роки тому

    Great thanks, it was so helpful for my task!!!🤩🤩🤩

  • @nonodev
    @nonodev 3 роки тому

    That Tutorial is Gold. Thanks

  • @Smart.Potato
    @Smart.Potato 3 роки тому +1

    7:44 I am getting Name: ${user.first_name}Name: ${user.first_name}Name: ${user.first_name}Name: ${user.first_name}Name: ${user.first_name}
    instead of actual names in API, I double checked and everything is the same as you typed. not sure what I'm doing wrong. could you help please.

  • @parsamarami5683
    @parsamarami5683 2 роки тому +1

    thanks bro...useful ;)

  • @Landuytfamily
    @Landuytfamily 3 роки тому

    I cannot express how much grateful I feel watching this tutorial. Super Precious!! Liked and subscribed. Please send me a link to learn async and await version. THANK YOU

  • @basement_grower
    @basement_grower 2 роки тому

    Nice video man, helped me out

  • @thayrangabriel2087
    @thayrangabriel2087 3 роки тому

    Thanks so much for making this tuutorial!

  • @cantareiramartins55
    @cantareiramartins55 4 роки тому

    Thank you for the explanation!

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

    fascinating. First step, step back.

  • @cuadros9870
    @cuadros9870 3 роки тому

    I actually passed an interview after watching this video

  • @ioslearner9536
    @ioslearner9536 3 роки тому

    Thank you so much sir... This video really helped me a lot.
    I am subscribing to your channel right now...

  • @AD-lr6pc
    @AD-lr6pc 3 роки тому

    Wow great tutorial 👍

  • @chigozieemeafu4415
    @chigozieemeafu4415 3 роки тому

    it was an awesome lesson made easy.

  • @user-mishapagan
    @user-mishapagan 3 роки тому

    thank you so much , it was a REAL help!! )

  • @sandeepkumarmahto5428
    @sandeepkumarmahto5428 5 років тому +1

    Thanks sir I look for the exactly this solution..

  • @athraafaraj8387
    @athraafaraj8387 2 роки тому

    thank you very useful

  • @itshamiiid
    @itshamiiid 2 роки тому

    thanks. this was helpful.

  • @verdynandreyhans9592
    @verdynandreyhans9592 2 роки тому

    you saved my day broh ....

  • @KANCHANADHIKRAOJADHAV
    @KANCHANADHIKRAOJADHAV 2 роки тому

    Thanks alot sir!

  • @adityaband6919
    @adityaband6919 3 роки тому +1

    Really nice video

  • @Jakobowsky
    @Jakobowsky 4 роки тому

    Thanks a lot for this video!

  • @amirhoxha6231
    @amirhoxha6231 3 роки тому

    Amazing video

  • @justcats2184
    @justcats2184 3 роки тому

    I love how u explain please make more tutorial videoss

  • @MsRitika1990
    @MsRitika1990 3 роки тому

    Please use axios async await...you don't have to use then again and again...looks neat too..
    Video is too good..this is what I was looking for...

  • @Lyrik-Klinge
    @Lyrik-Klinge 3 роки тому

    Thanks!

  • @mariejolie2645
    @mariejolie2645 2 роки тому

    I would love to know how to get a user by id in the url and display its infos by clicking on its avatar for instance. Any tutorial on this ? thanks

  • @HemmingEducation
    @HemmingEducation 2 роки тому

    Great!

  • @MehediHasanMondal
    @MehediHasanMondal 5 років тому +1

    Nice tutorial buddy

  • @sahil-ld1bu
    @sahil-ld1bu 2 роки тому

    please make more tutorials on javaScript it will very helpful

  • @owltrades
    @owltrades 3 роки тому

    Thanks man

  • @ovidiublaga1
    @ovidiublaga1 4 роки тому

    Hello. Have you though about doing the pagination?

  • @NelIglesiasPerez
    @NelIglesiasPerez 4 роки тому

    THANK YOU

  • @egel2787
    @egel2787 2 роки тому

    How can I display only the first id1 of database

  • @Asif78611
    @Asif78611 4 роки тому

    What if we want return an integer value in the string literal. I tried but its showing undefined. Please help

  • @Faisal-jo5vk
    @Faisal-jo5vk 2 роки тому

    what if i am not fetching a json file

  • @RocoSafreti
    @RocoSafreti Рік тому

    👌

  • @matusbalogh7778
    @matusbalogh7778 2 роки тому

    This video is fantastic, exactly what I was looking for! Thank you! One question - I'm trying to only display the first result (in your example it's Name: George) but can't seem to be able to filter it out. I can't tell where I'm going wrong. Could you please advise on how to approach this? I'm sure it must be quite simple.

    • @hikari1690
      @hikari1690 2 роки тому

      Depending on the api, you may be able to add a query to return only one.
      Alternatively, understanding the returned object can allow you to manipulate it. For example, if it's an array you can just use index 0 to get the first item.
      I didnt finish watching the video cause it's too dry so I dont know what this api returns... But it's a month since your comment so I'm guessing you already got an answer by now anyways 😂

  • @hchchc948
    @hchchc948 5 років тому

    How would you go about instantiating a new instance of a class with the properties of the fetched data? Awesome tutorial btw!

  • @ltmanbonzo7762
    @ltmanbonzo7762 2 роки тому

    Can someone please tell me why it is not outputting on the html correctly for me? For example it is only outputting "Name: ${user.first_name}", instead of "Name: George"

  • @fridalundstrom6212
    @fridalundstrom6212 4 роки тому

    Great video! Do you have any suggestions on how to put the data into 3 separate divs that I allready have created in my HTML? The API I have contains three arrays, and I want to put each array in separate divs by using Javascript.

    • @codebushi
      @codebushi  4 роки тому +1

      You probably need to split up the arrays and do a .map() three different times in each of your separate divs.

  • @ritsk4338
    @ritsk4338 4 роки тому

    Awesome video.

  • @Univelz
    @Univelz Рік тому

    i receive error : TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')
    message: 'Cannot read properties of null (reading 'insertAdjacentHTML')'}
    Why this happen even though i follow the tutorial?

    • @codebushi
      @codebushi  Рік тому

      If you can share your code, I can take a look!

    • @Univelz
      @Univelz Рік тому

      @@codebushi my apprenticeship already end month ago and it solved already so yeah. Altho i dont remember the problem anymore

  • @user-mishapagan
    @user-mishapagan 3 роки тому

    I have a question . If you had to display an average value for each user. How would you implement that into template literal? Is that even possible? I'm trying to accomplishe that atm and totally stuck :(

  • @adminyork4397
    @adminyork4397 4 роки тому

    Can you make a video on how to create a pop-out modal when any of these users are selected and provide additional info about them in the modal? Also on your then method could you just do .them(data => console.log(data.data)) making it a one liner instead of 3? Thx for the video!

  • @IneyeGabriel
    @IneyeGabriel 4 роки тому

    How do we select the first child and add a class to it?

  • @NuwanThisara
    @NuwanThisara 4 роки тому

    Hello, thanks for the tutorial, but console says --- TypeError: data.data.map is not a function -- then what?

    • @codebushi
      @codebushi  4 роки тому

      Hi! Can you share your code maybe with jsfiddle.net? Make sure you 'return' something in your first '.then()' and do a console.log of data first to see what the value is.

  • @maliknauman7873
    @maliknauman7873 3 роки тому

    how can we post image

  • @muhammadaqilal-muhtadi9185
    @muhammadaqilal-muhtadi9185 4 роки тому

    how to connect my fetch API code with other code ? so i can rendering data with the other code
    *i'm sorry if my language is so bad 🙏

  • @paulohfsantos
    @paulohfsantos 4 роки тому

    nice

  • @engr.kingsleyfoncham2619
    @engr.kingsleyfoncham2619 2 роки тому

    im having some issues

    • @codebushi
      @codebushi  2 роки тому

      Hi! What issues are you having?

  • @ritsk4338
    @ritsk4338 4 роки тому

    please create a video on promise

  • @r7butler
    @r7butler 4 роки тому +3

    Gotta love how Emma Wong turned out to be a white man seemingly in his late 20's

  • @Smart.Potato
    @Smart.Potato 3 роки тому

    return 'Name: ${user.first_name} ';
    my VSCode is thinking this line as a whole string and does not understand ${} is JS. what do I do please
    Edit: ok I finally figured it out. I was trying ' instead of ` holy cow

  • @alexmelka5324
    @alexmelka5324 4 роки тому

    is it fucking so hard to make it at readable size ??

  • @tamang1234
    @tamang1234 4 роки тому

    why are u so handsome