CODEWITHSUNDEEP
javascriptjqueryjsonopenweathermap
majestyc54
majestyc54

Reputation: 125

Javascript doesn't seem to be processing JSON api

I'm trying to make a page that will use the openweathermap api to display the user's city and local temperature, unfortunately it doesn't seem to be processing the JSON api and is doing nothing. My code is fine as far as I can tell so I don't understand what's wrong.
Here's the jsfiddle link and javscript code:
https://jsfiddle.net/qo2h1L9e/2/

 $(document).ready(function() {
  var data;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
      console.log(lat);
      console.log(lon);
      console.log("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886");
      $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886", function(json) {
        data = json;
        console.log(data.name);
        $("#city").text(data.name);
      });
    });
  }
});

Upvotes: 2

Views: 102

Answers (2)

Syed Mhamudul Hasan
Syed Mhamudul Hasan

Reputation: 1349

I have done it jQuery try this code 

        $(document).ready(function() {
            var data;
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var lat = position.coords.latitude;
                    var lon = position.coords.longitude;
                    console.log(lat);
                    console.log(lon);
                    console.log("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886");
//                    $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886", function(json) {
//                        data = json;
//                        console.log(data.name);
//                        $("#city").text(data.name);
                    //                    });
                    var url = 'http://api.openweathermap.org/data/2.5/weather';
                    var params = {};
                    params.lat = lat;
                    params.lon = lon;
                    params.APPID = "4907e373098f091c293b36b92d8f0886";

                    $.ajax({
                        type: "GET",
                        url: url,
                        dataType: "jsonp",
                        contentType: "application/json; charset=utf-8",
                        data: params,
                        success: function (res) {
                            console.log(res);
                        },
                        error: function (res) {
                        }
                    });


                }
                );
            }
        });

The problem is in json.For cross domain use jsonp.

Upvotes: 0

Scriptomaniac
Scriptomaniac

Reputation: 232

I had a similar issue when coding this. Assuming you're on FCC?

Anyways, try adding &callback=? to the api URL. You may need to get the data as JSONP rather than JSON.

Also, you don't need to define data. You could access the object directly through the json parameter.

Upvotes: 1

Related Questions