Real World Array Method Uses in JavaScript Web Development

A real world example of taking some sample weather data from the DarkSky API and creating a Grid of weather over a 24 hour period.
Array.map( ), Array.filter( ), Array.forEach( ) and Array.reduce( ) are all demonstrated in creating the end product.
JavaScript Code GIST: gist.github.com/prof3ssorSt3v...
HTML Code GIST: gist.github.com/prof3ssorSt3v...
Sample JSON Data Code GIST: gist.github.com/prof3ssorSt3v...
JavaScript Arrow Function video: • ES6 JavaScript Arrow F...
Array filter video: • JavaScript Array filte...
Array forEach video: • JavaScript Array forEa...
Array reduce video: • JavaScript Array reduc...
Array map video: • JavaScript Array map m...
DarkSky API video: • How to use the DarkSky...

[@Eltopshottah]

People take for granted all the work that goes into modern day web applications

[@mrmjw1025]

Nobody EVER tells you "What" or "Why" these functions are used for in a real case scenario - so frustrating, so thank you very much...

[@The__Gent]

Seriously, I really don't get why. Thankful for tutorials like this.

[@rotrose7531]

Thank you very much for this real world example. Many teachers do similar things, but nobody else explains the details involved in it except you. Parsing realworld APIs is really overwhelming for us beginners, if possible, I appreciate more real world tutorials like this will be released.

[@mkamalkayani]

Very useful video. The real world scenario makes the leaning process more intuitive.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks!

[@kunalchachra2715]

loved your video's ....started watching just 10 days back.,extremely helpful and easy to understand with full concepts and application ,keep it up.

[@chesterxp508]

Another very cool tutorial !!!

[@badhrinath9404]

your video elaborates on each function and every functionality. Very thankful for your effort. These videos mean a lot to me. I request you to share your mail. Thanks from Badhrinath

[@jsnode2075]

Awesome, this is what I am looking for... Can you make the JS prototype depth tutorial?

[@SteveGriffith-Prof3ssorSt3v3]

JSNode it's on my list of upcoming videos

[@Fermicious]

Hi Steve, Thank you so much for these videos. You’re that rare combination of expert and teacher, and your videos are helping me immensely in my learning. I have a question: is the timestamp in }).forEach((timestamp) the same variable timestamp you declared above with: let timestamp = hour.time? Or is it a new one declared by the fat arrow function?

[@SteveGriffith-Prof3ssorSt3v3]

Different variables. Each timestamp variable only exists inside the scope of its containing function. The first is inside the first forEach method's function json.hourly.data.forEach( ()=>{ in here... }) The second timestamp variable is holding each value from hour.time in the chained methods json.hourly.data.filter( ).map( ()=>{ return hour.time ... gets passed into the timestamp variable in the forEach function} ).forEach( (timestamp)=>{ ...timestamp only exists here... } )

[@Fermicious]

@@SteveGriffith-Prof3ssorSt3v3 Thank you ! I really appreciate the response.

[@rafiel767]

This is so awesome. Real-world examples are key to learning. I have one question though. For some reason the time on my divs start at 21:00, then 22:00, then 23:00 AND THEN I get 0:00. The very last div on the bottom right shows 20:00. Any idea why this is?

[@abdiag603]

Hi Steve on line 65 on the reduce() method why did you use the limits of -100, and 1000 for the temp and time respectively?

[@SteveGriffith-Prof3ssorSt3v3]

They are just default starting values. -100 is going to be below any temperature that I get. Same idea for the time. 1000 is a nice round number that will be less than any value I get.

[@852charliepapa]

Hi, Steve! Great video as always. You're an excellent instructor. 2 Questions: 1) Why at 24:16 (line 46) did you opt to include a full if statement in the body of the function you gave to your .filter() method? I was under the impression that the .filter() method would do this sort of thing implicitly. The inclusion of an if statement here seems a bit superfluous to me, or am I mistaken? 2) Merely a curiosity perhaps, why did you decide, at 9:11 (line 37) to name your new Date() variable ‘timmy’? This seems to me a little divergent from what I’ve been told is considered best-practice for naming variables. Is this your own personal thing here, or is it an esoteric abbreviation for something? Most of your other variables here and in other videos seem to make more sense to me. Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

1. When students are first using the array methods like filter, it makes more sense when they see the full if statement. With practice people remove those. 2. `timmy` is the variable name that I typically use for my `timers`.

[@852charliepapa]

@@SteveGriffith-Prof3ssorSt3v3 Interesting. Thanks so much.

[@susanwowe7810]

Great video! I don't quite understand one line of code though: div.id = 'ts_' + timestamp.toString(); which is on line 30. I don't understand why this line is needed, as I couldn't find where you use it later in all three files. However, when I tried to comment out this line, the highlight blue and yellow colors will disappear. Could you explain why this line has any control over the highlighted dates? Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

Each div needs a unique id. We are taking the timestamp for that time period and making it part of the id. We just can't use a number by itself as an id for an HTML element. So, we prefix the number with a string "ts_". Now the id will be something like "ts_15123123123123". Then you can reference it later on by it's id.

[@kllokoq]

Fantastic!!! I was wondering today about how to make use of forEach loop chained to other array functions and this now makes complete sense. It should be added at the end of the chain and used to manipulate the DOM, because forEach does not return a new array like other methods do. Does anyone know what weather API i could study, since DarkSky is now closed for the new users? Thank you Steve!

[@SteveGriffith-Prof3ssorSt3v3]

Here is a list of public APIs that include some weather ones. github.com/public-apis/public-apis

[@kllokoq]

This is great!!! Great collection, I had no idea this many APIs existed! Thank you!

[@programmingwithjanaravi6981]

Can you make some project in JavaScript for beginner . your videos are awesome.

[@SteveGriffith-Prof3ssorSt3v3]

Do you have something specific in mind? I have a playlist of JavaScript videos for beginners called JavaScript from the Start - kzbin.info/www/bejne/sJu5d6icqZaCaLs Was there a specific topic that you wanted to see?

[@hacker2ish]

I think what he meant is not a demo, showcasing a feature, but the process of building a website.

[@faizanansari975]

Sir error is coming fetch API cannot load file:///D:/react-native/javaScript/darksky-sample.json. URL scheme must be "http" or "https" for CORS request. init @ real-world1.js:15

[@jassihambran]

How did you create the grid layout? how come you have 5 columns and 4 rows. You did not show how to do that?

[@SteveGriffith-Prof3ssorSt3v3]

I used flexbox. The CSS is in the HTML file that is linked to in the description.

[@jassihambran]

@@SteveGriffith-Prof3ssorSt3v3 got ya. Thanks.

[@romeojoseph766]

what if we didn't use the init function, I mean what if we just write the code without waiting for anything?

[@SteveGriffith-Prof3ssorSt3v3]

If you do anything to your DOM (edit the HTML, add new content, reference elements on the page) then that code must run after the browser has finished parsing the HTML. This is the purpose of the DOMContentLoaded event listener. You can put your script tag at the bottom of the page but that is just avoiding the problem, not solving it. If your script is ever used on HTML files written by someone else then the code might break.

[@romeojoseph766]

@@SteveGriffith-Prof3ssorSt3v3 Got it!

[@pjosxyz]

why is the end js always uploaded... is the starting js available somewhere... what am I missing 😅

[@SteveGriffith-Prof3ssorSt3v3]

I only uploaded the finished code that was used in the video for a reference. There is no starter code.

[@pjosxyz]

@@SteveGriffith-Prof3ssorSt3v3 cool, was just wondering. You're a legend for making these videos man, really appreciated

[@kishankakadiya40]

Please tell me what is difference between array and object programming give me some real world example So i can easily understand difference between array and object

[@SteveGriffith-Prof3ssorSt3v3]

What I am doing in the video is a real world example of both. In JavaScript everything is either a Primitive value or an Object. Arrays are a type of Object. Here is a video about Primitives - kzbin.info/www/bejne/nH2uq5tqgZVjiqs If you are struggling with the concept of an Array, here is my playlist about Arrays - kzbin.info/www/bejne/l6OsmZuImZaFhsU

[@sadiqmustaphaaji1606]

please i don't understand the grid work

[@SteveGriffith-Prof3ssorSt3v3]

This grid is using CSS Flexbox. If you download the HTML file from the code GIST, all the CSS you need is inside the #container{ } style and the .hour{ } style. Those two styles will create a create. You can manually add divs inside the main element and give them all the class name "hour" and you will have a grid.

[@yarik83men51]

+++

[@ralucabora]

For those who are doing this tutorial from home you need a server in order to work.

[@SteveGriffith-Prof3ssorSt3v3]

You don't have to use a server. The data can be fetched from the API directly, although the DarkSky API was bought by Apple and Apple will be killing the API next year. If you do want to run your own server, every computer can be a server. Brackets and VSCode both have extensions for doing live preview and hosting your site with a temporary server. Alternatively there are dozens of simple NodeJS modules that can be used to create a simple temp server on your computer. You don't need another server regardless of where you are working. I have a Serverside NodeJS playlist that shows some of these.