Parsing Weather API Data into HTML

[00:00:00]
>> I guess we should make some results on the screen. What do you all think? So how about this? How about instead of open weather fetch here, we call make weather. Right? Or how about get weather items. As soon as console done logging it, we'll get the items out, actually, just get some HTML out.

[00:00:25]
And we'll just say results.inner HTML equals that HTML. Great. So we're able to pass in the zip, here and actually create some HTML and put it on the screen. So we're, we're trying to keep this as minimal as possible with all our side effects. And we'll push up above the line, get weather items.

[00:00:52]
And we take in a zip, and we do our, yeah, open weather fetch with those two things. Super cool. And now that dot is a task, you can map over it. And how about this where we have to dig in, right? We had the that response. If I can remember what it was, we get like this response and I think it's response.mean, let's just take a look at what that is.

[00:01:24]
And then we got to turn it in HTML, right? I wonder if it'll just slap it on the screen. No, it won't. [LAUGH] What's happening there? What you're mad about? Get weather items, get weather items is not [CROSSTALK] there it is. Thank you. Undefined. Nice. It is not mean.

[00:01:45]
Let's just look at the response. JSON string if I Nothing, okay. Can't read JSON of undefined. What do we got here? Is this right? It's right, so what's happening? So we have to turn in the JSON before resolve it. Okay dot list. All right. So we can call on response dot list.

[00:02:20]
Okay, we got a bunch of stuff out of here. We got a bunch of weathers, weathers [LAUGH]. What do we want to do? We want to get each weathers, we map over them and we'll do w dot main that's what I was thinking over here, for each of these they have a main and a dot 10 and we have a dt.

[00:02:41]
Okay, that main.tempt, let's just look at this alone and then make more progress. Cool. All right. So here's where I want to kind of make a data type, right? So, in object oriented style, I would make this object and it would take the weather response and would parse all those methods and have methods that work on it.

[00:03:01]
Right? Here, we're gonna keep it separate. So we're gonna make a weather data type. It takes in, why don't we take in our date time and our temperature. And we're gonna turn this, daytime and temp into just a formal object here. So we have that and we're gonna make a bunch of these weathers, right?

[00:03:29]
Weather we have the .mean.dt that's it. Inside the mean or outside ,I can't remember. Now we'll find out. And so this is kind of like a design decision, I tend to do is like make these things formal. And why don't we go ahead and we want it to be deterministic, right, and nice.

[00:03:53]
We're gonna make a little helper to weather that takes a dt and temp in here, we're actually going to parse.a So we'll call weather here. We're gonna say like to date on the dt. And we're gonna say to Fahrenheit, Fahrenheit is gonna kill me isn't on the temp.

[00:04:17]
Okay, so this is a constructor. But I have different constructors I can make for the same data type, which has the date time and the temp on it. And to Fahrenheit, we'll have to look up and but I know at least I can do this. Let's stub it out, to something to Fahrenheit will just be the K.

[00:04:40]
About the k plus a fast, perfect, and we'll bring in moment for a little bit of parsing. And so we'll just say about moment. Now that's pure because it always take a date time and return you something. In fact, it doesn't throw an error. It just gets the wrong data if it's not formatted right, that's really nice.

[00:05:04]
It's also a Unix timestamp, so we have to subtract 1000 from it, so that's great. But if it all worked out, let's take a look at that. These are two weather now. We should get a bunch of objects didn't work out. Do we not have moment?
>> Thank you.

[00:05:25]
Good times. Debugger, great, bunch of objects. Let's actually do some debugging here. And we'll just map, x console.log x turn x. Great, a little log trick. Here it go, we have 40 of these things. Okay, we've got a moment. And we've got the temp which added 1000. That's cool.

[00:05:58]
I don't really want a moment thing. I want it to just like be good, a date. I don't remember
>> stop format
>> Thank you adapt format. Appreciate that.
>> I think you have to put it down there. It's a moment. And then it's on the right hand turn.

[00:06:22]
>> Of course. Yes.
>> Yeah.
>> There we go. All right and see excellent. [LAUGH] Perhaps it's not on the main I don't know if it's on main. There we go. Cool, but they're the wrong dates. Very much the wrong dates. Maybe the subtracting 1000 didn't work. Let's take a look at.

[00:06:46]
>> I think it's divide by 1000 because we come back in milliseconds.
>> Is that was happening? All right, let's divided by 1000, if anybody knows what's going on, it doesn't really matter. No, that's not right either. It's all right, it's a Unix time stamp SDT. And we'll just go ahead and roll with it even though it's the wrong date.

[00:07:08]
So we've got these dates and these temps, right, we can go create the appropriate functions to turn Kelvin and Fahrenheit. It's just cut and paste formula, could go read through the moment docs and figure out how to turn the timestamp into an actual date. Okay, let's replace moment with the new date.

[00:07:31]
And in fact, I think I can just do date.
>> Then dot two local date string
>> Yeah local date string.
>> Wait.
>> You're getting there
>> Is that right?
>> Mm-hm
>> See what happens there. I might need a new, might not. This is awesome, dates,

[00:07:55]
>> [INAUDIBLE] [CROSSTALK]
>> Cool.
>> Running it. And two is it local? Well, it looks like it's working.
>> Well it's local that's true.
>> Okay, cool. See what happens there. All right. But that's kind of besides the point, right?. I mean, I totally agree. Let's get rid of the moment and just focus on this stuff.

[00:08:31]
But, what I'd like to do here is is kind of talk about how to structure this app and pull apart these functions. So what we have here is some weather functions in a weather type. So we can make a weather module and pull these in, right, from a weather or their thing and hide hide the complexity through.

[00:08:52]
We could expose the weather constructor or not. And we can do some more operations within getWeatherItems or we can kind of break it down into sub compositions. So, a lot of these have benefits and drawbacks, but as you see like we're writing a pure functional app right now.

[00:09:14]
And we're pushing all our effects down to this and all our nice, clean, testable functions up here. Maybe we should finish it up by saying toLi and we'll take weather item and we'll just do a little li weather.temp. And the weather.dt cool closeout that li. And let's see get weather items does all this stuff right and then maps into all we have are these weathers and we'll map over them toLi.

[00:10:05]
And I don't feel comfortable putting this to Li within this thing. So what I want to do is kind of break this out into a prepare, items and it takes it takes some JSON. And then it does all this stuff. Great. So this is the JSON, I guess we should have this right here.

[00:10:32]
So let's say JSON dot list and we'll map all these weathers into weathers and whatnot. And then it looks like. Yeah, do I get that wrong? This is actually already the list. Before we were mapping inside of the task that was the first map. But now we map prepared items.

[00:10:57]
We're already working directly with JSON. And that kind of cleans this up right all these nested maps and stuff and also separates this whole nice reusable kind of thing from the actual task itself. And in fact, maybe a little bit better of a design would not be to take the full JSON, but rather take the list itself.

[00:11:19]
Law of Demeter and all that. And then, if ever I'm mapping over a list, I tend to find that I should map on the outside. It's just a thing. Here is not the case. So I'm just gonna leave that alone. But do that Jason that list right here.

[00:11:40]
But one thing I've noticed in the past is, if I take an array and I call that map that tends to be a red flag. It means I'm baking map into my function, when usually I should pull that out and just call my function again and again outside the function.

[00:11:53]
In this case, we're turning a list into another weather and then I mean, I guess we could do that. We could just do that but it would turn this into a the whole meat of the function. Let's see what it looks like. So we can do json.list.mapprepare items.

[00:12:13]
Alright. And this just now takes the W. Great. We're back to the map but it's much nicer. And then we have this toLi, whoops. All right, and that's our view stuff. And let's see how we're doing. Weather is not to find, where's weather somebody find.
>> Weather's weather.

[00:12:38]
It's my brother in law's last name, sisters, all right, cool. So we've got it. We can take it one step further by grouping it by the date string. Unfortunately, I think they're all gonna be in the same group. But hopefully, I've made enough progress here to where you can kind of see how this unfolds.