Question

我正在构建Weather App for FreeCodeCamp。这是link to my CodePen。

我从this API提取我当前的位置信息。我正在尝试将获得的结果中的对象属性分配给其他变量，但我的网页一直在分解。例如 -

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

上面的代码在控制台中出现以下错误，打破了我的页面 -

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

当我将a.city分配给city时，页面工作正常，但只有在我将city分配给location时才会出现故障。如果我console.log(city)，它会将我的城市，即a.city的值记录到控制台。所以我所做的就是将city的值分配给另一个变量location。这可能是什么原因不起作用？

Answer 1

由于您的代码调用信息的方式，您需要在这些getJSON方法中嵌入大量调用。将它们分配给全局范围变量并不会影响它们在运行这些函数后将被定义。

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");
    });
  });
});

同样，当访问变量location globaly时，它将访问全局范围window.location，这将导致网址更改为hostname/city。

要使用api，您必须在codepen中运行代码而不是，但必须从不在iframe中的地方运行。

无法将JSON对象的属性分配给另一个变量

1 个答案: