I’ve reached Weather App project and I feel completely lost in terms of JSON/AJAX. For the Random Quote Generator project I skipped using an API for this very reason. But with this project it is needed and I should learn it either way.
First thing I did was go back to the JSON/API section but I feel that it is very short and didn’t really explain the AJAX part in depth. The only thing I really learned how to use was the navigator to get the geolocation. Even though it is advised we don’t look at the sample code I had to look as I just didn’t know where to start. A lot of the code used in pulling the data and then using that data to insert into the html is just confusing for me.
Can someone please point me in the right direction.
Hey @JesseRM,
part of doing these kind of challenges is researching online and figuring out how things work. That way, you learn as you go. And from my experience, that’s the best way to learn.
There are plenty of resources out there to help you in getting started coding with AJAX requests.
Regarding the weather app, you need to look at how their API works and that way you will know how to configure the AJAX call.
Once you successfully manage to make an AJAX call, I suggest just logging the response to see how the object you get is built. That way, you will see how you can parse it.
If you want to keep things simple, JSON is just a javascript object. Nothing more (little bit less actually :D). So when you request JSON data from API, you get a javascript object in a string form. You need to parse it into an object so JS can understand it, .
In terms of AJAX, I think the easiest way is to keep it as simple as possible. So until you understand and need to do otherwise, just presume that the request is always successful. When you have that down, then you can delve into error handling and state.
If you have the latitude and longitude, then you make a request to the server like that:
//vanilla JS. I have the logic wrapped in a function,
// but ofc u could do without.
function getData(url) {
//we require a new request object
let request = new XMLHttpRequest()
//then we specify the type of request, address,
//and what happens when the request is successful
request.open("GET", url)
//when response comes, we will load the it into the console.
// but we could do whatever we want with it ofc.
request.onload = function() {
//responseText is the actual answer. This is the JSON
// that you need. Now we parse it into a JS object.
var weather = JSON.parse(request.responseText)
console.log(request)
console.log(request.responseText)
console.log(weather)
console.log(weather.main.temp)
}
//when all things are specified, we send the the request out,
// and the rest (ie the handling of the response) will happen when we get it back.
request.send()
}
var lon = 42
var lat = 24
getData("https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon)
// above should get a JSON about weather somewhere. Take a look of
// those logs in the console and you will see the the returning object
// (browse it, look at all those things you will understand in the future :))
// and similarities and differences between the formatted and unformatted data.
// jQuery would make syntax simpler,
// but it is important to understand vanilla. So get at it!
Hey, thanks for the response and the links. I do suppose that with some of these things it’s just about reading through some of the documentation. I have been trying to read through some of it and understand it little by little.
Thank you for the response and the code! You know it actually makes much more sense when you know that with JSON you are essentially getting a JavaScript object but in string form and when you parse it it’s as if you were taking away the quotation marks so JS can read it; this clicked for me
Thanks for the comments throughout the code, this really helped to understand the steps and what is going on through out the process.
