Weather app Where is a bug? Please help

Weather app Where is a bug? Please help
0.0 0

#1

Please help!

I have been trying to check if this structure works before implementing background color / image as well as icons.
I checked what forum regarding to browser issue (do not use chrome) as well as https request issue (you can only access http request to pull open weatther api. I would like to see what I am doing wrong…

code pen link http://codepen.io/ichiLamuchy/pen/XMgZqw

(note: i was not sure how to use api respond of “weather”:[{“id”:804,“main”:“clouds”,“description”:“overcast clouds”,“icon”:“04n”}], so used // to make the line as comment)

This is my js

var getIp = 'http://ip-api.com/json/';

$.getJSON(getIp).done(function(data){
  var locationCity = data.city;
  var locationRegion =data.regionName;

  $("#placeName").html(locationCity + ", " + locationRegion);
});

$.getJSON(getIp).done(function(data){
  
  var locationLat = data.lat;
  var locationLon = data.lon;
  var appIP = "1c2aa71d847aabb70d4ba46896881f33";
  
$.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=" + locationLat+ "&lon=" + locationLon + "&APPIP = appIp").done(function(weather){
        //var mainWeather = weather.weather.weather;
        var tempa = weather.main.temp;
        $("#sky").html(mainWeather);
        $("#temp").html(tempa);
    
});
});

This is HTML and CSS

<html lang="en">


<head>
  <meta = "UTF-8">
  <Title>Weather repot web by Ichi</title>
  <!-- link to font Awesome check any other limnks-->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <!-- link to jquery & ajax -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- lin to bootstrap -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>
<style>
body {
  text-align: center;
  background-color: #00CED1
  }
  #appName{
    font-weight: bold; 
    Color: 	#FFF8DC; 
  }
  h1{
    font-size: 40px; 
    font-family: "Arial Black", Gadget, sans-serif;
    margin-top: 20px
  }  
  h2{
    font-size: 35px;
    font-family: "Arial Black", Gadget, sans-serif;
  }
  p.indent{
    padding:3em;
  }
  #result-container{
    background-color: #FFF8DC;
    margin: 20px 190px;
    padding: 30px 40px;
    border-radius: 9px;
  }

#2

you have &APPIP should be &APPID
also below when you create var mainWather i changed it so have a look
var mainWeather = weather.weather[0].description; // change to this

  var locationLat = data.lat;
  var locationLon = data.lon;
  var appIP = "1c2aa71d847aabb70d4ba46896881f33";
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+locationLat+"&lon=" + locationLon + "&APPID=" + appIP ).done(function(weather){
        var mainWeather = weather.weather.description; // change  this
        var tempa = weather.main.temp;
        $("#sky").html(mainWeather);
        $("#temp").html(tempa);
    console.log(weather)
   console.log(mainWeather)
});
});```

#3

Adding to what John wrote, one basic way to debug JavaScript, including jQuery, is to make use of console.log() function. This will help you find issues for why your code was not working.

On the $.getJSON you only made use of the done() function. This if fine when everything is working as expected, but when things do not work you need to use the other related functions like these…

.done(function() {
console.log( “second success” );
})
.fail(function() {
console.log( “error” );
})
.always(function() {
console.log( “complete” );
});


#4

Thank you, I saw people doing that but how and where can I do that on JS like below? Could you possibly show me an example on the code below?

var getIp = 'http://ip-api.com/json/';

$.getJSON(getIp).done(function(data){
  var locationCity = data.city;
  var locationRegion =data.regionName;

  $("#placeName").html(locationCity + ", " + locationRegion);
});


$.getJSON(getIp).done(function(data){
var locationLat = data.lat;
var locationLon = data.lon;
var appIP = "1c2aa71d847aabb70d4ba46896881f33";
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+locationLat+"&lon=" + locationLon + "&APPID=" + appIP ).done(function(weather){
var mainWeather = weather.weather.description; // change this
var tempa = weather.main.temp;
$("#sky").html(mainWeather);
$("#temp").html(tempa);
console.log(weather)
console.log(mainWeather)
});
});

#5

Thank you for pointing it out. Yes it is working now, I will be trying out some options! yes!


#6

Ichi,

I did a little work and simplified your code. I got rid of one of the getJSON calls and combined the code into one. I also removed the variables as they are not needed. I instead use the returned json object. I also found you had originally used a https in the call to the open weather map api and it did not seem to like that, http worked fine. Also as John stated above the APPIP needed to be APPID. Below is the code I wrote so you can see how to make use of the .error() and the .complete() To test an error change your url path and read the console. You should see an error message.

var getIp = 'http://ip-api.com/json/';

var appIP = "1c2aa71d847aabb70d4ba46896881f33";

$.getJSON(getIp)
.done(function(data){
  weather_data = data;
  console.log("data: "+JSON.stringify(data,null,2));
  console.log("http://api.openweathermap.org/data/2.5/weather?lat="+data.lat+"&lon="+data.lon+"&APPIP="+appIP);
  
  $("#placeName").html(data.city + ", " + data.regionName);
  
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+data.lat+"&lon="+data.lon+"&APPID="+appIP)
  .done(function(weather){
    console.log("weather: "+JSON.stringify(weather,null,2));
    $("#sky").html(weather.weather.weather);
    $("#temp").html(weather.main.temp);
  })
  .fail(function(weather) { 
    // this should display any error data.
    console.log( "error: "+ JSON.stringify(weather,null,2) );
  })
  .always(function() {
    console.log( "inside complete" );
  });
  
})
.fail(function(data) { 
  // this should display any error data.
  console.log( "error: "+ JSON.stringify(data,null,2) );
})
.always(function(data) {
  console.log( "outside complete" );
});

If the error response is not JSON based you can remove the JSON.stringify()


#7

Thank you so much. It is very helpful!

Very sorry for late reply, am on holiday and did miss the email notification of this :slight_smile:

Ichi x