Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

kushalmahajan2
kushalmahajan2
7,683 Points
Posted by kushalmahajan2
kushalmahajan2
7,683 Points

I have successfully completed the challenge but it seems the temparature shows as zero, no matter, which city you type ?

I want to retrieve the current temparature of a city but it doesn't seems to work with this API. Please advise !

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

  var weatherAPI = 'http://api.openweathermap.org/data/2.5/weather';
  var data = {
    q : "Mumbai,IN",
    units : "metric"
  };
  function showWeather(weatherReport) {
    $('#temperature').text(weatherReport.main.temp);
  }
  $.getJSON(weatherAPI, data, showWeather);
});
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

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Change your script tag from 

<script src="jquery.js"></script>

to 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
kushalmahajan2
kushalmahajan2
7,683 Points
kushalmahajan2
kushalmahajan2
7,683 Points

I changed that but the results were same. I tried changing the jquery CDN to latest one too but the temperature shows as zero only.

I was checking on code engine here all the time by previewing it. But saving the files locally and then checking it in the browser helps to see the results.

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

So it still doesn't work on this site in workspaces for you?

kushalmahajan2
kushalmahajan2
7,683 Points
kushalmahajan2
kushalmahajan2
7,683 Points

Not the workspaces but I was hitting a preview button when typing in the challenge window. There it still shows as zero.

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Ahh, I see what you mean. I investigated. It turns out that because Treehouse is secure (https) and the API endpoint is not, it is being blocked. If you view the console you will see a mixed-content error.

The free version of the API wont work. There is an https compatible version of the weather API but it's pricey.

Chrome blocks this. Period. Firefox also blocks it, but it gives you an option to allow the blocked content. I did a quick screen cast here http://screencast.com/t/CBJmrxVAPMg6

The problems isn't your code. That's why it ran properly outside of the test environment. I will report it. If there is not workaround then maybe we can just get a notice printed on the preview screen.