Need help for Weather app - Weather from API does not show up

1

Hello, I’m challenging for Weather app now.
I could show ‘Location’ through API but ‘Weather’ and ‘Temperature’ through API does not show up.
Could anybody give me advice? Thank you so much in advance.

HTML

<div class="container">
  <h1> Show you the weahter </h1>
  <span id="location"> </span>
  <span id="weather"> </span> 
  <span id="temp"></span> 
  
  </div>

Javascript

    var OpenWeatherKey = '4178c7c00c8613f9b84c4784af4fff3e';
    var locationUrl =  'http://freegeoip.net/json/';

    function getLocation(){
    	$.ajax({
    		url : locationUrl,
    		dataType: "json",
    		success : function(data){
    			var country = data['country_name'];
    			var city = data['city'];
    			var latitude = data['latitude'];
    			var longitude = data['longitude'];
    			$('#location').html(city + ', ' + country);
                var Weather = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=" + tempUnit + "&APPID=" +OpenWeatherKey;
                getWeather(Weather);
                console.log(Weather);
                		}
    	});
    }

    function getWeather(url){
    	$.ajax({
    		url:url,
    		dataType:"json",
    		success: function(data){
    	    var weather = data['weather'][0]['main'];
    	    var temp = data['main']['temp'];
            $('#weather').html(weather);
            $('#temp').html(temp);
    		}
    	});
    }

    getLocation();

Codepen link

2

I’m sorry I cannot show my HTML code properly.
This is codepen link. http://codepen.io/aaayumi/pen/BpEqWz

3

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

4

Your code on Codepen doesn’t exactly match your copied code. In the getLocation function you end all variables with a dot, var latitude = data.latitude.;, which shouldn’t be there: var latitude = data.latitude; Note that Codepen gives an error (red bubble with an exclamation mark).

Besides that, you are using tempUnit (var Weather = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=" + tempUnit + "&APPID=" + OpenWeatherKey;) but is not defined.

1 Like
5

Thank you so much. I could find what was the problem.
I will follow the instruction when I post next time. :slight_smile:

1 Like