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

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

#1

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.


#2

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.

#3

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:


#5

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);
    });


#6

@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.


#7

Can you post a link to your code?


#8

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


#9

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”.


#10

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


#11

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:


#12

Nevermind! figured it out on my own.