1.6 Refreshing Data with setInterval() - Working with Data and APIs in JavaScript

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 95

  • @jonathanalcaide1530
    @jonathanalcaide1530 5 лет назад +1

    For those who prefer km rather than miles use this:
    const miles_to_km = 1.60934;
    document.getElementById('alt').textContent = (parseFloat(altitude)/miles_to_km).toFixed(2);
    Thank you Dan! I am learning a lot working with data.

  • @grantwilliams9838
    @grantwilliams9838 4 года назад +8

    I cannot say how much I appreciate the effort you put into each video and the enthusiasm you show. You explain things so well and provide awesome examples to work with. Thank you so much coding train for giving so much back to the community. Much appreciated

  • @caseymckinney8377
    @caseymckinney8377 3 года назад +7

    What I really love about these series' is that they're so good you could get away with charging for them online but you don't; it's all on RUclips for anyone to obtain this knowledge. Massive props!

  • @maskman4821
    @maskman4821 4 года назад +3

    This is an awesome project, it is exciting to see the satellite actual location and movement !!!

  • @sankim6636
    @sankim6636 4 года назад +2

    I just watched the first series without a break... your explanations are very helpful! Thanks!!

  • @justanindieguy
    @justanindieguy 4 года назад +2

    Best coding teacher. Greetings from Mexico.

  • @xcrxwadda8287
    @xcrxwadda8287 Год назад +2

    December 2022 and is still helpful... thanks

  • @JevVan
    @JevVan 5 лет назад +4

    As usual, you so a great job of entertaining and educating at the same time. Thank you for all you work.
    I had followed along with a lot of you p5.js videos, making up my own canvas library as I went just to learn more. But ultimately, I needed to move in from canvas to more real-world applications. Glad to see you moving that direction cause I like to style more than many others in the web. Again, Thanks!

  • @JoseCarlos-fq3ul
    @JoseCarlos-fq3ul 3 года назад

    Este canal es oro para mi. Gracias

  • @jkw4703
    @jkw4703 5 лет назад +10

    Helpful as always! Thanks for putting this all together!

  • @Avran98
    @Avran98 5 лет назад

    These videos are a godsend. I have a web application exam coming up in a few days, so thanks a lot! This is really helping me out!

  • @fernandoflores3728
    @fernandoflores3728 2 года назад +1

    Superb! Thanks Dan!

  • @nnasim5089
    @nnasim5089 Год назад

    This is really amazing, i have been overthinking a simple solution can be done like this , setInterval, and update some longitude or latitude on map show moving marker

  • @CaffeinatedTech
    @CaffeinatedTech 5 лет назад +1

    You can omit the zoom from the setView function. That's the way I did it, every two seconds it moves the station icon and centres the map, but I can change the zoom while I'm looking at it.

  • @davidencinas86
    @davidencinas86 Год назад

    One of the best on youtube.

  • @edwincarlsson9014
    @edwincarlsson9014 5 лет назад +1

    Great work as always Dan. Helpful for any level of web dev!

  • @TheCalax
    @TheCalax 5 лет назад +5

    You should consider to replace setInterval with a recursive setTimeout because setInterval will trigger every X seconds, no matter if the function callback finished executing or not

    • @teebu
      @teebu 4 года назад

      There is a nice module for that, SetIntervalAsync

    • @catmium7974
      @catmium7974 Год назад

      what do you mean by " no matter if the function callback finished executing or not" in this context? Does this means that sometimes location updates can overlap or get updated in similar times because getIss() fetches data and is a async function?

    • @catmium7974
      @catmium7974 Год назад

      And this is what you mean i guess:
      async function getISS() {
      // fetch and update Iss location on map
      // ...
      setTimeout(getISS, 1500);
      }
      getISS();

  • @TheCheaterMinecraft
    @TheCheaterMinecraft 5 лет назад +7

    You should look into Promise with async/await functions, you could use a .then() after getISS() to initialize the setView for example
    getISS().then( setView and so on )

  • @АйданаАбдыкеримова-г2и

    You are the top dude Love your videos
    God bless you
    Wish you all the best
    RUclips is made for people like you

  • @deanjames6997
    @deanjames6997 3 года назад

    Thanks for the great tutorial from Korea :)

  • @lalu225
    @lalu225 5 лет назад

    This series is gold!

  • @prathmeshtamhan6043
    @prathmeshtamhan6043 3 года назад

    you are great ohh man ..most amazing explainations over data and api ever

  • @omargian_stw1305
    @omargian_stw1305 2 года назад

    Good tutorial thanks. I'm wondering if I need to use data as a parameter for another function out of setInterval, I mean get the current data and use that data for a different function for example create a function with an alert(), and run it only once and not every second or any argument of setInterval method. What do you recommend for this task?

  • @catmium7974
    @catmium7974 Год назад

    You can set the zoom level first when creating the map:
    const map = L.map("map").setView([0, 0], 5);
    and than when updating the view you can omit the zoom level so is wont change the zoom level on every update:
    map.setView([latitude, longitude]);

  • @ramil8029
    @ramil8029 2 года назад

    This is such a great series of videos! Thank you so much, you're an amazing teacher @TheCodingTrain

  • @brendano1204
    @brendano1204 3 года назад

    thankyou very much. you are a great teacher!

  • @yanfoo
    @yanfoo 5 лет назад +4

    Daniel, setInterval is a terrible delay function, especially used in an asynchronous context; if the fetch call has latency, then you might get two async fetch requests being performed in shorter intervals. The correct way would be to use setTimeout. For example :
    function autoUpdate() {
    getISS().then(() => setTimeout(autoUpdate, 1000));
    }
    This way, you are garanteed that no two request will stack if there is latency on the network.

    • @yanfoo
      @yanfoo 5 лет назад

      @@creeplabs Hi, of course! setTimeout works exactly like setInterval, but it executes only once. Both setInterval and setTimeout returns a timer id, which can be cancelled with clearInterval. See : developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

    • @TheCodingTrain
      @TheCodingTrain  5 лет назад

      Ah, yes, that's for this important feedback, great point!

  • @yanneschan1314
    @yanneschan1314 2 года назад

    It is such a great tutorial, thank you!!

  • @artania06
    @artania06 5 лет назад +2

    Cool tutorial ! Thanks :)

  • @prithwirajdutta3827
    @prithwirajdutta3827 5 лет назад

    Thank you Daniel.

  • @ericrovell1970
    @ericrovell1970 5 лет назад +1

    Thank you! So interesting and useful.

    • @ericrovell1970
      @ericrovell1970 5 лет назад +1

      @@fraqxxnoorhanijs5515 This video was unlisted :)

    • @TheLshallo
      @TheLshallo 5 лет назад +1

      @@fraqxxnoorhanijs5515 Also see the description you can already watch the whole series. Linked there.

  • @ΔημήτριοςΦκιαράς
    @ΔημήτριοςΦκιαράς 3 года назад

    How would we approach the same problem, if instead of quering the API for the position of the ISS, we have the positions for... say a week, in a JSON file?

  • @vladig2835
    @vladig2835 5 лет назад

    Good Job, Dan! Keep it up.

  • @BaronJovanek
    @BaronJovanek 5 лет назад

    Please try to visualize the Milankovic-Cycles with precession, eccentricity and obliquity.
    Would be great.

  • @nicholaspetruzzelli4931
    @nicholaspetruzzelli4931 4 года назад

    How might I add css rules to the map to make it fit a screen better or perhaps only appear in the middle of the screen?

  • @maiqsolution
    @maiqsolution 4 года назад

    my api hit my crypto currency on every refresh i want to limit my refreshes so when use keep refresh once in a day the api doesnt hit the call and the rate remain same , but the rate comes up from database

  • @zgparsons
    @zgparsons 5 лет назад +1

    Great series! Thank you! 👍🌈

  • @jotaroisdarius1918
    @jotaroisdarius1918 2 года назад

    thank you, i learned a lot :)

  • @fastlearner9993
    @fastlearner9993 2 года назад

    THE BEST !!!!!!!!

  • @onz9950
    @onz9950 3 года назад

    my man that feeling when my search result pop one of your vid

  • @EchoVids2u
    @EchoVids2u 2 года назад

    Is there a way to fetch real time data from an API without requesting it every second or so suing setInterval?

  • @kantyDarius
    @kantyDarius 5 лет назад

    Awesome!.... I made an web app some time ago combining web sockets with geo location html api, butt unfortunately I couldn't finish because Google maps api restrictions calls 😔

  • @vishvish24
    @vishvish24 2 года назад

    I am facing an issue, I fetching record every 2 second and given a button when I click that button a modal box open and that data show on the modal box and give option to save that in database, but when I close the modal box so i need to refresh the page once, can u give me solution

  • @obelich
    @obelich 4 года назад

    Hi thanks to the video and i have a question how i can make a search to the location ? to get some direction and put the map ?

  • @YolkBytes
    @YolkBytes 4 года назад

    cool lessons Thanks.

  • @morpheuz2006
    @morpheuz2006 5 лет назад

    Thanks so mutch... I learn a lot

  • @MoniqueBoea
    @MoniqueBoea 4 года назад

    I need to do this with data but on the refresh, show the next 10-20 records of the data set. Any suggestions?

  • @krystianwojtowicz9305
    @krystianwojtowicz9305 4 года назад

    i want to do site that takes data with positions of vehicles of public transport with possibility of changing number of line wich position i wanna see, could you do sth like that?

  • @rodrigomendonca3474
    @rodrigomendonca3474 5 лет назад

    Congratulations for de job. how do I insert and update 184 markers with information from a geojson coordinate server in the range of 20 seconds?

  • @digigoliath
    @digigoliath 5 лет назад +1

    Great job. This is giving me ideas but let's learn coding first. LOL

  • @bulverismo
    @bulverismo 4 года назад

    muito obrigado!!!

  • @vishvish24
    @vishvish24 2 года назад

    I am fetching data every 2 second and it works property but after 5 min iit hangs the pc and freeze the process I am using on good pc and also 8gb ram please suggest me solution.

  • @arifulislamistiak7234
    @arifulislamistiak7234 5 лет назад

    great tutorials man , thanks

  • @mohddanish3813
    @mohddanish3813 5 лет назад

    how can i use restriction in console for print length of bit of image according to image size . because when i increase window size so my bit length is increase and image is not forming in its original shape. please help me in Processing IDE 3.5.3

    • @BrettCooper4702
      @BrettCooper4702 5 лет назад

      That would be a question for discourse.processing.org/top/all

  • @ΑνδρέαςΓκόγκος-θ5σ

    thanks for this tutorial

  • @vishvish24
    @vishvish24 2 года назад

    I am fetching api data every second but it hangs pc after 5 minute, at start it looks very normal, but after 5 minutes it hangs please provide alternative

  • @HoudinifxAlfredosanmartin
    @HoudinifxAlfredosanmartin 5 лет назад

    Hello, I would like to know if you teach VEX ?

  • @matissjudins6272
    @matissjudins6272 2 года назад

    thanks man

  • @sanchitverma2892
    @sanchitverma2892 5 лет назад

    Hi dan can you tell us languages that you know?just curious

  • @Alexey0795
    @Alexey0795 5 лет назад

    how to update the starlink train?

  • @robertlewis7300
    @robertlewis7300 5 лет назад

    Okay my mane man. You cool as it can get with me man> Thank you so much and I love your work.

  • @shuebkamil5556
    @shuebkamil5556 4 года назад +1

    I GET (Uncaught SyntaxError: Unexpected number) THIS ERROR BECAUSE OF LINE 6. can someone help me to fix this i couldnt find any solution.
    fetch(request_url)
    .then(function(response){
    return response.json();
    }).then(function(data){
    //console.log(data);
    const lon= data.results.0.geometry.lng; // i get
    console.log(lon);
    //document.getElementById('latitude'). textContent = lat;
    //document.getElementById('longtitude'). textContent = lon;
    }).catch(function(error){
    console.error('could not find the file');
    console.error(error);
    });

    • @shuebkamil5556
      @shuebkamil5556 4 года назад

      object of that api is in 0 and now i cant use 0.

  • @nurulkholifah2117
    @nurulkholifah2117 4 года назад

    Sir, please make tutorial move marker based on realtime databse firebase

  • @adrianwalker9917
    @adrianwalker9917 3 года назад

    If your BROWSER IS RETAINING ALL THE MARKERS on the map you may have a line with ( ......... addTo(mymap); ) inside your async function.

  • @thinkdomotic4915
    @thinkdomotic4915 2 года назад

    👍❤

  • @anuraghazra4772
    @anuraghazra4772 5 лет назад

    Nodejs!!! (this.dot song INTENSIFIES!!)

  • @veereshwarayr498
    @veereshwarayr498 3 месяца назад

    Where's the bell sound at the beginning man..?

  • @michy7
    @michy7 Год назад

    you're so cool

  • @grainfrizz
    @grainfrizz 5 лет назад

    if you have the altitude, you can do this in 3d

  • @ginbaelish5882
    @ginbaelish5882 5 лет назад

    Is it posible to include some videos about displaying the data using functional react components?

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2021-12-08}, {2022-02-14}

  • @johnmwansa4180
    @johnmwansa4180 5 лет назад

    i need to ask you pravent pls

  • @addmoreice
    @addmoreice 5 лет назад +2

    While I love your videos, they show some seriously bad habits without mentioning them.
    For example 'GetISS' should be just about getting the ISS information. It shouldn't be setting the position of the map, it shouldn't be updating the marker. it should just be updating the new data information. Separation of concerns is an important thing.
    It's fine for a quick demo and for learning things. But this caused issues for you when you had getISS and the set interval causing the map size issue. this bug shouldn't have happened.

    • @addmoreice
      @addmoreice 5 лет назад

      @youtubesucks It's not just OOP. it's programming in general. This can be done with a functional or procedural system as well. Each function should have a specific 'goal' a single thing it does. It should do that thing and no more nor less.
      What does GetISS do? It Gets the ISS's position & it sets the map location & it sets the marker.
      Those &'s are important, they are a clue that the function is doing too much. We should have a "gets the ISS information' function and a 'updates the map' function.

    • @BrettCooper4702
      @BrettCooper4702 5 лет назад +2

      Your overlooking the core function of the tutorial, to inspire and inform. There are so many ways to do things and most are good enough for the job. Refactoring to suit your design choices doesn't mean the original was a serious bad habit as that is why we refactor, getting it working in an easy understandable way is most import with these tutorials and that is why they are so good. Knowing what can be done better is also useful tool in education as it made you think about what could be better.

    • @addmoreice
      @addmoreice 5 лет назад

      @@BrettCooper4702 I agree that he goes the extra mile making it easier to understand with the extra examples. That has always impressed me. But I'm not looking for much...a *mention* that these should probably be broken up and why, maybe a mention when the bug caused by this mistake. It's just like error handling, it's common for tutorials to just not do it. That's fine. But failing to *mention* that error handling is needed and should be done right? come on!

  • @maiqsolution
    @maiqsolution 4 года назад

    my api hit my crypto currency on every refresh i want to limit my refreshes so when use keep refresh once in a day the api doesnt hit the call and the rate remain same , but the rate comes up from database