Unable to assign JSON object's property to another variable

Question

I'm building a Weather App for FreeCodeCamp. Here's the link to my CodePen.

I'm pulling in my current location details from this API. I'm trying to assign the object properties from the results obtained to other variables but my webpage keeps breaking down. For example -

var city;
var location; 
$.getJSON("http://ip-api.com/json", function(a) {
  city = a.city;
  location = city;
});

The above code breaks my page with the following error in the console -

pen.js:14 GET http://s.codepen.io/boomerang/ec76a96f53a8031f8d1405309568a2711480895619856/Greenville 404 (Not Found)

The page works fine when I assign a.city to city, but only breaks down when I assign city to location. If I console.log(city), it logs my city, i.e, the value from a.city, to the console. So all I'm doing is assigning the value of city to another variable location. What could be the reason this isn't working?

You're running into CORS related issues. Unless a site specifically permits it, you can't access their APIs directly from the browser. — Ouroborus
– Ouroborus, Commented Dec 5, 2016 at 0:43
You are getting a 404, i.e., the URL does not work. That is why it is broken. — Tim
– Tim, Commented Dec 5, 2016 at 0:43
@Ouroborus I'm able to use their API without having to redirect it through CORS. For example. if I console.log(a.lat), I'm able to log the latitude of my location. — Anish Sana
– Anish Sana, Commented Dec 5, 2016 at 0:53
@varlogtim I understand the error I'm receiving but it's only happening when I try to assign city to location. Otherwise the page doesn't break. For example, if I comment out location = city, the page renders properly. — Anish Sana
– Anish Sana, Commented Dec 5, 2016 at 0:55
@AnishSana The Codepen you provided doesn't function for me. Codepen shows an error instead of successfully running your code. — Ouroborus
– Ouroborus, Commented Dec 5, 2016 at 1:03

devilfart · Accepted Answer · 2016-12-05 02:23:08Z

Because of the way your code is calling the information, you will need to nest a lot of your calls in those getJSON methods. Assinging them to global scoped variables does not garuentee they will be defined once those functions are run.

var temp;
var latitude;
var longitude;
var city;
var region;
var country;
var location2;

$.getJSON("http://ip-api.com/json", function(a) {
  latitude = a.lat;
  longitude = a.lon;
  city = a.city;
  location2 = city; 

  var weatherURL = "http://api.openweathermap.org/data/2.5/station/find?lat=" + latitude + "&lon=" + longitude + "&cnt=1&apikey=[API-KEY]";

  $.getJSON(weatherURL, function(a) {
    temp = a[0].last.main.temp;
    var firstCelcius = Math.round(a[0].last.main.temp - 273.15);
    $("#temp").html(firstCelcius);

    $('body').on('click', '#c', function(e) {
      var fahrenheit = Math.round(((temp - 273.15) * 9 / 5) + 32);
      $("#temp").html(fahrenheit);
      $("#c").html(" &deg;F");
      $("#c").attr("id", "f");
    });
    $('body').on('click', '#f', function(e) {
      var celcius = Math.round(temp - 273.15);
      $("#temp").html(celcius);
      $("#f").html(" &deg;C");
      $("#f").attr("id", "c");
    });
  });
});

Also when accessing the variable location globaly it will access the global scoped window.location which will cause the url to change to hostname/city.

To use the api's however you must run your code not in codepen, but from a place not in an iframe.

Collectives™ on Stack Overflow

Unable to assign JSON object's property to another variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related