Check out a free preview of the full Hardcore Functional Programming in JavaScript, v2 course
The "Inspecting the Weather API" Lesson is part of the full, Hardcore Functional Programming in JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Brian demonstrates how to fetch weather data from the weather API, and explains the next data parsing steps.
Transcript from the "Inspecting the Weather API" Lesson
[00:00:00]
>> Had in mind, we're gonna build this weather app, that's all. Cool so our starting point, we have an API key. I don't want to show it to you. If I do, I'm sorry. They're gonna delete it anyway, it's not a big deal. But the point is, we have an API key to do weather app stuff.
[00:00:16]
You can go to open weather as open weather API, and get your own. We're just going to do this together have some fun. Let's see the index HTML is just this it has an input for zip code, a button that says go and ul, that's results. And I don't wanna so all I know is that we're going to have some data and we can play with that data.
[00:00:42]
I don't really have a direction for this. But I will say I don't want to use the view library. So keep that in mind. [LAUGH] I don't want to slap on the prereqs that you have to know react to because just for this, right? Or view or Angular or whatever else.
[00:00:59]
So let's keep it sane. Keep it clean all right. So we're gonna do. I also have this little thing, the API call that gets us our data cool. So it takes a zip code and my API key and we'll return some stuff. So why don't we start there.
[00:01:21]
We'll build some stuff around it. And I think, what I wanted to show is you put in your zip code, right. And we'll put some weather down here and then we'll just keep on building until we're out of time. You know, we'll do this together, have some ideas.
[00:01:35]
All right, so I know right off the bat that I can fetch this because I did this last night at my hotel. [LAUGH] and I can call was event because it's a promise and we get this result and results .Jason. And let's go ahead and then console dot log.
[00:01:57]
What do we have? Perfect cool. 404 cities city not found, right we have to fill in the zip. Anybody have a zip code?
>> For this one.
>> Cool. Hey, Minneapolis. Let's see what the weather is. Okay. [LAUGH] So, for this, all right so It looks like we have some stuff here that looks like this is count y.
[00:02:38]
Looks like there's 40 yep, 40 in the list. That's good. Good to know. We have if you're into fish [LAUGH] so its 200, I guess that's the code. They're very, very into lining these two up. I betcha It was like city list. Anyway, you ever work with someone like that they like just hammer on the name until they line up.
[00:03:05]
Okay, so we have DT I'm assuming date time. Looks like a timestamp. In the list we have clouds. All the clouds 21 and daytime again, no this is the same daytime it's just fold it out okay and DT text of course. We got mean, weather it's in weather it's more stuff well it's a nice little description.
[00:03:36]
That's cool. We might wanna use some of this. Main has a ground level humidity pressure, temp in key f full disclosure, I know that's a Calvin. And we got a 10 maxmin. Our temp, this is the Kelvin. I don't know what the Kf is. This is the Kelvin.
[00:04:01]
These are kelvins. So the first thing we have to do, in my mind would be, figure out what app we're going to build but the actual I envision tell me if you agree is that we would look through the lists get the temperatures out turn the kelvins into Celsius or Fahrenheit and then maybe group them by date.
[00:04:25]
Because I think a lot of these dates are the same. So these are different times of the same day. So, you might want to like a normal weather app would show like your times across the day and each row or something in a table. Don't want to get to UI heavy because we don't use a UI framework.
[00:04:43]
So let's just start by digging in here. So this is impure come on. All right, so let's fix that. And, I'm just going to wire this up. When I hit the Go button, I'm just going to give it this so don't have to type that in every single time.
[00:05:04]
But I don't want to like make it not look like it's working. So let's give it a value. There we go. And boom.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops