How do I know what to do? AJAX requests, JSON

Hi guys! So I have watched about 3 different tutorials on ajax requests, and I feel like I understand the requests just fine, theoretically. Each time I feel like I’m ready to do it, but then I get to an API website and I am completely lost.

For example, I am on the suggested weather data API for the weather app project, and I just have no idea where to start.
Can someone help me out with what to look for to, at least, access the API? I really want to able to do it on my own, but even when I feel like I understand the process, I am still completely lost when I try and implement it my self.

Also, if someone can describe their own learning process while they learned how to implement ajax requests on their own I would really appreciate it.

I’m really stuck on this one.

1 Like

I feel like the easiest way to use AJAX is to stick with jQuery’s ajax method. rather than getJson. I think this because you have more control of the request, you can see what is going on. The main parts of the request are

  • url – this is the url that you are making the request to, for example, http://openweathermap.org/api/
  • __data__ -- this is the data that is part of the request. So since you are doing the weather map, this will be a GET request which means that what you put in this data object will be appended as a `querystring` to the URL, so latitude, longitude and your api key could go in here. You could also specify the units of measurement, such as imperial, metric etc.
  • __dataType__ -- this specifies the type of data, in this case use jsonp, which is a less secure method of JSON, but it will help deal with __CORS__ (Cross-Origin Resource Sharing) issues.
  • __success__ -- this is the callback that will be called when the data is successfully retrieved. Since JavaScript works asynchronously, you can't simply return a value. Instead you need to specify a particular action that you want to happen when the data comes back
So here is an example of putting all of this together: ``` var data = { 'lat': '12345', 'long': '4566', 'APPID': 'somekeyhere', 'units': 'metric' } $.ajax({ url: 'http://openweathermap.org/data/2.5/', data: data, dataType: 'jsonp', success: function(data){ console.log(data); } }); ``` Its entirely possible that I made loads of mistakes above, that's just my understanding of AJAX. Hope that helps in some way.

This question gets asked enough that I’ve just made a quick, simple, but “real world” interactive example. Try this out and let me know if you have any questions:

1 Like

If you’d like to do it with JSON:

  1. Get your APPID from openweathermap
    It looks like: 5gdf85fddf…

  2. Call API ( using city name, in this case )

    $.getJSON("https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=London&APPID=“YOUR APPID”, function(val){
    console.log(val);
    });

@JavaTheNutt I haven’t had any luck using dataType: ‘jsonp’ even with crossDomain: true. I am still having CORS issue. I must have missed something. I used crossorigin.me and it worked in the Weather App but not in the Random Quote project.

Can you post a link to your code?

Nice, I’m just following along now, and so far it’s been super helpful. Thanks for making this!

Hey, thanks for your message about the key, I wasn’t sure how to implement it before this. what is the significances of “https://crossorigin.me” part of your URL? When I go to the api website, all of the URLs start with just the “www.api.openweather…etc”.

Great! Let me know if there is anything I can do to make it better.

will do! I’m trying to follow along with my own weather app project, and wanted to ask something about the DarkSky Api (you wrote about it in another post I found). I’m trying to implement it, but when I call the api with my secret key, I get the error “Access-Control-Allow-Origin”. Do you have any idea how to fix that? I ask because I know you’ve used it this api before :slight_smile:

Nevermind! figured it out on my own.