Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AJAX Basics (retiring) AJAX and APIs Call the jQuery $.getJSON method

Rene Hinojosa
Rene Hinojosa
7,430 Points

Open Weather Map API needs an API-key to make the request.

Hi,

In the challenge "Call the jQuery $.getJSON method" I saw something odd.

If I try to do a request with only these two data attributes (q and units) that we have right now in the code (i.e. copy and paste this URL: http://api.openweathermap.org/data/2.5/weather?q=Portland%2COR&units=metric)

I got an error message. "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."

" Starting from 9 October 2015 our API requires a valid APPID for access."

To fix this I have created a new free account in openweathermap.org and with this I have one API key to request the data successfully (tested in my local machine).

var data = { q: "Portland,OR", units: "metric", appid: "MyAPIKeyHere" };

Example of the response with a valid appid:

{"coord":{"lon":-122.68,"lat":45.52},"weather":[{"id":802,"main":"Clouds","description":"scattered clouds","icon":"03n"}],"base":"cmc stations","main":{"temp":26,"pressure":1015,"humidity":39,"temp_min":24,"temp_max":27.78},"wind":{"speed":3.1,"deg":310},"clouds":{"all":40},"dt":1467855033,"sys":{"type":1," id":2274,"message":0.003,"country":"US","sunrise":1467894617,"sunset":1467950453}, "id":5746545,"name":"Portland","cod":200}

With this change (adding the valid API-key) I still have the error message in the challenge.

Thanks.

weather.js
$(document).ready(function() {

  var weatherAPI = 'http://api.openweathermap.org/data/2.5/weather';
  var data = {
    q : "Portland,OR",
    units : "metric",
    appid: "MyKeyHere"
  };
  function showWeather(weatherReport) {
    $('#temperature').text(weatherReport.main.temp);
  }

  $.getJSON(weatherAPI,data, function(result){  showWeather(result);  });

});
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>What's the Weather Like?</title>
  <script src="jquery.js"></script>
  <script src="weather.js"></script>
</head>
<body>
  <div id="main">
    <h1>Current temperature: <span id="temperature"></span>&deg;</h1>
  </div>
</body>
</html>

1 Answer

John Coolidge
John Coolidge
12,614 Points

Rene,

You actually didn't need to make an account or anything. You're over-thinking the question.

If you rewatch the video that I'll link below, right around the 30 second mark, Dave explains how to write the $.getJSON function correctly.

https://teamtreehouse.com/library/ajax-basics/ajax-and-apis/making-the-ajax-request

You've posted this:

$.getJSON(weatherAPI,data, function(result){  showWeather(result);  });

and you're very close, but your callback function doesn't need an argument and you don't need to write out "function() {}..." Rewatch the video to see what you need to remove from your code to get the challenge correct.

I hope this helps.

John