1.6 Refreshing Data with setInterval() - Working with Data and APIs in JavaScript
1.6 Refreshing Data with setInterval() - Working with Data and APIs in JavaScript
💻https://github.com/CodingTrain/Intro-…
The lesson covers on refreshing new data from the ISS API and updating the HTML DOM accordingly once per second with setInterval().
🔗 setInterval() on MDN: https://developer.mozilla.org/en-US/d…
🎥 NEXT LESSON:    • 2.1 Server-side with Node.js - Workin… Â
🎥 PREVIOUS LESSON:    • 1.5 Mapping Geolocation with Leaflet… Â
🎥 FULL COURSE:    • Working with Data and APIs in JavaScript Â
🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/c…
📚 Books: https://www.amazon.com/shop/thecoding…
🎥 Coding Challenges:    • Coding Challenges Â
🎥 Intro to Programming:    • Start learning here! Â
🔗 p5.js: https://p5js.org
🔗 Processing: https://processing.org
Welcome to Working with Data and APIs in Javascript!
This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data?
📄 Code of Conduct: https://github.com/CodingTrain/Code-o…
Content
0.03 -> so far we've looked at how to reach out
2.37 -> and make a request using the fetch
3.959 -> function to an external API with a
6.54 -> particular URL path grab the data in
9.21 -> JSON format pull out a piece of that
11.04 -> data we want and then use it for a
13.62 -> particular reason and in this case the
15.96 -> data that I'm getting is the latitude of
17.369 -> longitude of the International Space
18.57 -> Station and I'm plotting it on a map
20.64 -> using the leaflet ojs library so the one
23.519 -> key feature there's a couple different
24.869 -> features here that I didn't implement
26.01 -> but one really key feature that I did
28.41 -> not implement is having that latitude
31.349 -> and longitude refresh automatically
33.989 -> without me having to reload the page now
36.09 -> it is important that I remind myself
38.129 -> that the rate limits of this API
40.23 -> specified that I cannot make the request
42.27 -> more than once per second so I should
44.82 -> limit my refresh rate of the application
47.1 -> itself to at a minimum that and this is
49.079 -> something that really can that you have
50.76 -> to be conscientious about in this case
52.11 -> it's just an example it's just an
53.25 -> experiment off to worry too much about
54.75 -> it but as you build applications that
57.27 -> get used by more and more people the
59.25 -> rate at which you're requesting data
60.719 -> from a API can become you know a
62.309 -> fundamental thing it's gonna it could at
63.87 -> a certain point cost you a lot of money
65.4 -> to make a certain amount of request so
66.99 -> yeah be thoughtful about how often
68.07 -> you're doing that but even before that I
70.049 -> think what I would like to see happen is
72 -> the map when it first loads to have the
74.82 -> space station oriented in the center
76.83 -> with a bit more zoom so let's see if we
79.17 -> can at least fix that so I'm going to go
81.63 -> back to the code and here once I get the
86.43 -> data from the International Space
88.02 -> Station this is where I update the
90.299 -> markers location so they're there I
92.759 -> should be able to do also update the
94.95 -> maps location and how do you do that
97.229 -> well it's the set view function you
99.15 -> might remember from the last video I
100.59 -> tried to use set view with the marker so
103.86 -> when you are specifying the location of
106.38 -> a marker that set that long when you are
108.689 -> specifying the location of the map
110.88 -> itself that is set view and I would give
114.09 -> it a latitude and a longitude and also
118.2 -> then some zoom level let's just try like
120.509 -> five I don't know what's gonna be
122.369 -> reasonable and there we go
124.619 -> apparently it's open it's over open
127.079 -> water right now so we're not seeing
128.94 -> anything super interesting let's set
130.739 -> that back down to two and we can see
132.569 -> there it is
133.4 -> it's right there in the admit all of the
135.379 -> Atlantic Ocean right now great now we're
139.34 -> ready for the final step here I want to
142.22 -> get the new latitude and longitude every
145.22 -> so often and the way that I'm going to
146.93 -> do that is with the set interval
148.94 -> function so there is a function in
152.36 -> JavaScript called set interval and what
155.84 -> set interval does is it says hey take
159.26 -> this other dysfunction maybe your
161.36 -> function called get ISS and have it
163.97 -> happen every so often like every 1000
167.569 -> milliseconds so in this sense I could
169.79 -> just call get ISS which does all this
172.97 -> and then I can I mean I want that to
175.4 -> happen to right when the page loads
176.629 -> because set interval will actually wait
178.609 -> a second for the first time it calls it
180.2 -> so I'm gonna leave this redundant when
181.67 -> you here get ISS and then every 1 second
185.18 -> do that again
185.93 -> let's see what happens wow that was like
187.34 -> one line of code the whole video for
189.26 -> this one line of code
189.95 -> we'll see if we run into any issues here
191.69 -> and have to do more up get ISS is not
195.56 -> defined oops the esses are capitalized
200.269 -> JavaScript as you might know is Kate
202.849 -> sensitive don't forget that I always
204.56 -> forget that so we can see this number is
209.66 -> changing every so often is this moving
211.849 -> oh wait it keeps fixing my zoom so
214.639 -> here's the thing even though I wanted to
217.879 -> set the maps location here initially its
221.15 -> view initially to this I only want to
223.43 -> set the view the first time so how do I
227.51 -> want to deal with this well there's a
229.25 -> variety of ways I can do it in this but
230.84 -> I think one way I could do is just use a
232.34 -> boolean flag variable so I can say
234.47 -> something like first time is true and I
239.84 -> could say right here if it's the first
242.09 -> time then set the view and after you do
246.349 -> that set first time equal to false so
250.28 -> this would be whenever get ISS is called
252.62 -> it's going to set that view to the
255.53 -> latitude longitude with that zoom then
257.84 -> set first time to false so the next time
260.03 -> it comes around that one
261.049 -> happen again maybe not the most elegant
262.55 -> solution but one that will work is it
267.59 -> moving
268.129 -> can we see it moved I think we're gonna
270.59 -> have to get a bit more zoom in here to
272.509 -> really see it moving there we go now we
274.639 -> can see the International Space Station
276.74 -> every one second is moving along the map
279.86 -> there's some small cleanup things we
282.139 -> could do that might be nice for me to
283.37 -> show you here just to kind of polish
284.78 -> this project off a little bit more one
286.97 -> is my webpage is showing me quite a bit
290.18 -> of decimal places for the latitude and
291.889 -> longitude that seems a little bit
293.3 -> unnecessary I can use the JavaScript
295.61 -> function - fixed - fixed which will fix
299.449 -> what it is adding - only to the decimal
302.27 -> - only two decimal places so that's a
304.19 -> nice little clean-up piece here I could
306.44 -> also add the degree right I might as
309.83 -> well add the degree character here to
311.629 -> see that so I can add right after the
314.21 -> span I could put the degree character
316.55 -> right here and I go back to the page and
319.28 -> whoops how come I didn't hit save no
321.71 -> where is it oh I put it in the span
323.81 -> that's very important it'll get replaced
325.31 -> if it's in the span has to be outside
326.87 -> and there we go so I have the degrees
329 -> there that's kind of nice there are so
331.759 -> many things we could add to this and a
333.44 -> nice reference might be to go back and
334.909 -> look at the where the ISS at website and
337.37 -> see for example what if I also grabbed
341.81 -> the altitude and then I made the size of
345.02 -> the icon somehow tied to the altitude
347.15 -> what if I added some more UI elements so
349.969 -> I could toggle things on and off maybe
351.86 -> actually I could keep the view always
354.259 -> centered around the ISS and have the map
357.05 -> move behind it whereas the ISS and the
360.05 -> ISS would stay in place instead of it
361.849 -> moving along the map again I could use
364.46 -> the p5 library to do my own custom
366.8 -> drawing perhaps even up the path or draw
368.96 -> a velocity vector of how the map is
371.18 -> moving in this video's description when
372.979 -> you go over to the github repository for
374.569 -> the code in this example I'll also
376.25 -> include the code for a variety of these
378.469 -> solutions and variations that you're
379.969 -> seeing right now so thanks for watching
381.86 -> this project we have done a lot in this
384.74 -> first module of working with data and
386.75 -> API in JavaScript we've learned about
389.029 -> the fetch function we know how to get
391.46 -> different kinds of data with the fetch
393.529 -> function
394.069 -> image text JSON data we know how to get
396.71 -> JSON data from an external API we've
400.4 -> looked at using some other JavaScript
401.749 -> libraries like chart Jas and leaflet
404.029 -> digest for charting and mapping but
406.789 -> we're missing a big huge piece what if I
410.599 -> want to save some data and use it later
413.24 -> what if I want to authenticate with an
415.249 -> API but hide my API keys there's so many
418.189 -> things that I might want to do that need
420.02 -> more than just an index.html file with
423.289 -> some JavaScript in it some HTML in it
425.869 -> maybe some CSS in it a lot of things
428.149 -> that I'm gonna want to do that I'm going
429.68 -> to show you how to do involve writing
432.139 -> your own server I'm gonna show you how
434.839 -> to use nodejs a JavaScript runtime
437.36 -> another way of writing JavaScript
439.009 -> outside of the context of the browser to
441.199 -> write server-side applications and do a
443.569 -> variety of kinds of things working with
445.52 -> data manipulating data saving data
447.499 -> communicating with api's that you
449.149 -> couldn't do so easily with just
452.409 -> javascript in the browser and the two
454.939 -> projects that I'm going to build in the
456.559 -> next set of videos they're projects by
458.33 -> Joey Cayley thank you so much for Joey
460.37 -> for preparing these materials and
462.139 -> allowing me to use them in this video
463.52 -> series the first one is going to capture
465.889 -> images from a web from your webcam and
467.87 -> save them to a database you're going to
469.849 -> learn about how to save data to a
470.959 -> database and also how to do something
472.669 -> more with the fetch function which is
474.439 -> post data to the server right now I've
476.479 -> been using fetch just to retrieve data
478.249 -> week also send data with a post request
480.409 -> and the third project also by Joey Lee
482.99 -> in this this project is crazy we're
484.879 -> going to use I'm going to use two
485.87 -> different API s at the same time one
488.029 -> forgetting weather information one for
489.68 -> getting air quality information and
491.389 -> what's going to be different and
492.709 -> interesting about that project is it's
494.449 -> going to require authentication and
496.159 -> hiding private API keys on the server
498.74 -> itself so we're gonna look at how to do
500.3 -> that so that you can publish an open
501.769 -> source your code but also keep your API
504.019 -> keys hidden so thanks for watching you
507.62 -> could now completed the first module in
510.259 -> working with data and api's and we're on
511.939 -> to module 2 in the next video
517.53 -> [Music]
Source: https://www.youtube.com/watch?v=jKQUHGpOHqg