JSON response from API

Question

I am trying to pull in weather data in JSON form using an API. It is successfully returning data from the API, however when trying to access the properties of the object I get the following:

Uncaught SyntaxError: Unexpected token :

I know the response is coming back because I can see it returns this

{"coord":{"lon":122,"lat":45},"sys":{"message":0.0024,"country":"CN","sunrise":1460581662,"sunset":1460630193},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],"base":"cmc stations","main":{"temp":280.37,"temp_min":280.37,"temp_max":280.37,"pressure":1004.49,"sea_level":1024.21,"grnd_level":1004.49,"humidity":77},"wind":{"speed":6.9,"deg":182.004},"clouds":{"all":92},"rain":{"3h":1.92},"dt":1460668593,"id":2034323,"name":"Tuquan","cod":200}

Here is the code I am using:

function displayWeatherAndLocation() {
$.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather/",
    jsonp: "jsonp",
    dataType: "jsonp",
    data: {
        lat: "45",
        lon: "122",
        APPID: "b8d8272fd3bdb1f099b1288ff750d5e2"
    }
})
.done(test)
.fail();
}

function test(response) {
   console.log(response.main.temp);
}

Answer 1

Just request the data normally. Don't use jsonp. jQuery will handle the conversion for you.

 function displayWeatherAndLocation() { $.ajax({ url: "http://api.openweathermap.org/data/2.5/weather/", data: { lat: "45", lon: "122", APPID: "b8d8272fd3bdb1f099b1288ff750d5e2" } }) .done(test) .fail(); } function test(weatherData) { document.querySelector('pre').innerText = weatherData.main.temp; } $('button').click(displayWeatherAndLocation); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click Me</button><br /> <pre></pre>