Show the the local weather - Problem with OpenWeatherMap

1

hello,

i’m trying to igure out with this app but i got stucked at the beginning.

I want to retrieve the city and the temperature, for now, by this api.
I can’t show the city in any way.
here is my codepen app Show Local Weather

Could someone help me?

2

It also depends on browser. On some browsers codepen has a secured connection, on others it does not. If you do use a secured connection for your project (so you can use geolocation), you can send openweahtermap through a cors proxy like this crossorigin.me - This website is for sale! - crossorigin Resources and Information.

3

The problem is, you can only retrieve the weather info with OpenWeatherMap, not the user’s location. You need to use another API for that. Check out the geolocation API and/or an IP to location API.

4

I’d still suggest to use both of them, you can try the getCurrentPosition(success, error) first and make a call to the IP to location API from its error callback function.

1 Like
5

But how can i get the city and the local current weather in that city?

6

Well, that’s the project :smiley: You need to get the user location from an API (read my first post and check the links) and once you know where they are, get the weather info from another API (e.g. OpenWeatherMap).

7

what the other people are telling you is that you need to have 2 separate api requests.
If this is your first api use, (it was for me), then you are just even more confused. :wink:
In a simple language, you just need to provide url where you are sending the request, and then you have to KNOW how the result looks like, in order to get what you need.
For example as someone said, to get the location you need to send json request to :http://ip-api.com/json.
(see third example in Javascript tutorial before the projects Get JSON with the jQuery getJSON Method).
Now, what do you get back? One way to find out is to get Postman (it is a Chrome app) https://www.getpostman.com/, and just put url that you are getting JSON from and see what it give you back. For location url, Postman gave me an object:
{
“as”: “”,
“city”: “San Jose”,
“country”: “United States”,
“countryCode”: “US”,
“isp”: “”,
“lat”: 37.2555,
“lon”: -121.9245,
“org”: “”,
“query”: “”,
“region”: “CA”,
“regionName”: “California”,
“status”: “success”,
“timezone”: “America/Los_Angeles”,
“zip”: “95124”
}
So now, I can just get my longitude and latitude, as
$.getJSON(ipApi, function(coordinates) {
lat = coordinates.lat;
long = coordinates.lon;
});
(I used var ipApi= “http://ip-api.com/json”, and coordinates is the NAME OF THE OBJECT that I am getting back, choose any name)
So now, you have to do the same thing for actually getting the weather forecast back.
Again, it will give you and object back, that has much more than you need. If you use Postman you will see exactly what you got back, and with .notation, you will be able to get temparature, wind, … etc. Hope this helps.

8

Hello,

Thanks so much. You helped a lot.
I retrieved the first location. I used a $.Ajax and i retrieved cìthe city in the tag i want.
My issue is yet in the second part:
I used the postman as you suggested but it return the whole json with data only if i insert an id city and not with a name city but in my app i retrieve the city name.
How can i do it?
I post the code:

`var lat;
var lon;
var cityname;
var iploc = "http://ip-api.com/json";

$.ajax({
  url: 'https://freegeoip.net/json/',
  type: 'GET',
  datatype: 'json',
  success: function(location) { 
    var lat=location.latitude;
    var lon=location.longitude;
    var country=location.country_name;
    var cityname=location.city;
    $("#city").html(cityname);

    $.ajax({ 
      url: "http://api.openweathermap.org/data/2.5/forecast/weather?city=" + cityname + "&APPID=7050fd6471ff561ef90236b14d7a9e02",
      jsonp: "callback",
      dataType: "jsonp",
      success: function(data)
      {

       var temperature=data.main.temp;
       $("#temp").html(temperature);
        
           
  var temp0= Math.round((temperature -32)* 5/9);

  
    }
  });
  }
 });`
9

Hey, your variables var lat and var lon, are defined before your ajax call. So do not use var in front of lon and lat anymore. (you are using it when upon success of ajax call, you are saying var lat= location.latitude) Use just lat, and lon, and cityname.

Also, if in your second ajax, if you console.log(url) – what do you get? I am thinking that just cityname would not work, as you need a country too to have one distict location?
add code console.log(url), and then copy that in postman
for example my url for open weather map is:
“http://api.openweathermap.org/data/2.5/weather?lat=” + lat + “&lon=” + long + id;

Watch out that the temparature that you are getting is actualy in Kelvins.
I am sure there are other things, but one would see it better in codepen, and console.