Javascript 从天气API获取数据时出错。Typeerror:无法读取AngularJS中未定义的属性_Javascript_Html_Angularjs

Javascript 从天气API获取数据时出错。Typeerror:无法读取AngularJS中未定义的属性

javascript html angularjs

Javascript 从天气API获取数据时出错。Typeerror:无法读取AngularJS中未定义的属性,javascript,html,angularjs,Javascript,Html,Angularjs,我正在尝试从FCC天气API制作一个简单的天气应用程序我能够获取位置并尝试从JSON文件访问temp属性，但在这样做时，我得到了“TypeError:无法读取未定义的属性'temp' 这是代码 <!DOCTYPE html> <html ng-app="weatherApp"> <head> <title>Weather App in Angular</title> <script src="https://

我正在尝试从FCC天气API制作一个简单的天气应用程序

我能够获取位置并尝试从JSON文件访问temp属性，但在这样做时，我得到了“TypeError:无法读取未定义的属性'temp'

这是代码

<!DOCTYPE html>
<html ng-app="weatherApp">
  <head>
    <title>Weather App in Angular</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://rawgithub.com/arunisrael/angularjs-geolocation/master/dist/angularjs-geolocation.min.js"></script>
    <script src="scripts/script.js"></script>
  </head>
  <body>
    <div ng-controller="weatherAppController">
      <h1>Weather App</h1>
      Your latitude is: {{coords.lat}}
      Your longitude is: {{coords.long}}
      <p> The Temperature is : {{temperature}} </p>
    </div>
  </body>
</html>

我已更新回拨功能，如下所示：

(function(){
    'use strict';
    angular.module('weatherApp', ['geolocation'])
    .controller('weatherAppController', weatherAppController);
    weatherAppController.$inject = ['$scope', '$http', 'geolocation'];
    function weatherAppController($scope, $http, geolocation){

        $scope.coords = {lat: 35, long: 139};
        $http.get('https://fcc-weatherapi.glitch.me/api/current?lat=35&lon=139')
        .then(function(response) { 
          console.log(response);
          $scope.temperature = response.data.main.temp;
        });
    }
    })();

为简单起见，我删除了geolocation调用，但您可以将其保留在您的版本中。有可用的工作代码

我已更新了回调功能，如下所示

(function(){
    'use strict';
    angular.module('weatherApp', ['geolocation'])
    .controller('weatherAppController', weatherAppController);
    weatherAppController.$inject = ['$scope', '$http', 'geolocation'];
    function weatherAppController($scope, $http, geolocation){

        $scope.coords = {lat: 35, long: 139};
        $http.get('https://fcc-weatherapi.glitch.me/api/current?lat=35&lon=139')
        .then(function(response) { 
          console.log(response);
          $scope.temperature = response.data.main.temp;
        });
    }
    })();

为简单起见，我删除了geolocation调用，但您可以将其保留在您的版本中。在angularJS中，当调用回调函数时，一个工作代码可用，它传递一个包含附加信息的对象，实际数据返回“data”属性。在您的代码中，您只需使用

$scope.temperature=data.data.main.temp
这将是有效的
最终代码为-
(function(){
  'use strict';
  angular.module('weatherApp', ['geolocation'])
    .controller('weatherAppController', weatherAppController);
  weatherAppController.$inject = ['$scope', '$http', 'geolocation'];
  function weatherAppController($scope, $http, geolocation){
    geolocation.getLocation().then(function(data){
      $scope.coords = {lat: data.coords.latitude, long: data.coords.longitude};
      $http.get('https://fcc-weatherapi.glitch.me/api/current?lat='+$scope.coords.lat+'&lon='+$scope.coords.long)
        .then(successCallback);
      function successCallback(data){
        $scope.temperature = data.data.main.temp;
        console.log($scope.temperature);
      }
    });
  }
})();

希望你能理解 在angularJS中，当调用回调函数时，它传递一个包含附加信息的对象，实际数据返回“data”属性。
在您的代码中，您只需使用
$scope.temperature=data.data.main.temp
这将是有效的
最终代码为-
(function(){
  'use strict';
  angular.module('weatherApp', ['geolocation'])
    .controller('weatherAppController', weatherAppController);
  weatherAppController.$inject = ['$scope', '$http', 'geolocation'];
  function weatherAppController($scope, $http, geolocation){
    geolocation.getLocation().then(function(data){
      $scope.coords = {lat: data.coords.latitude, long: data.coords.longitude};
      $http.get('https://fcc-weatherapi.glitch.me/api/current?lat='+$scope.coords.lat+'&lon='+$scope.coords.long)
        .then(successCallback);
      function successCallback(data){
        $scope.temperature = data.data.main.temp;
        console.log($scope.temperature);
      }
    });
  }
})();

希望你能理解
 这意味着你的data.main为空。你是否处理了数据变量是的，我处理了数据变量，它显示我正在接收一个对象。将此行then（successCallback）
更改为then（函数（响应）{successCallback（响应）；}
，您实际上没有将响应传递给回调函数。不，它不起作用。下面是我所做的：。然后（函数（响应）{successCallback（响应）；}）；函数successCallback（data）{$scope.temperature=data.main.temp；console.log（data）；}这意味着你的data.main为空。你是否对数据变量进行了控制台操作？是的，我对数据变量进行了控制台操作，它显示我正在接收一个对象。将此行然后（successCallback）
更改为然后（函数（响应）{successCallback（响应）；}）
，您实际上没有将响应传递给回调函数。不，它不起作用。下面是我所做的：。然后（函数（响应）{successCallback（响应）；}）；函数successCallback（数据）{$scope.temperature=data.main.temp；console.log（数据）；}是的，它现在正在工作，但是你能告诉我为什么我们要使用这些“数据”吗当Angular调用“回调”函数时，它会传递一个包含许多信息的对象，如响应头、http状态码等，返回的实际数据在属性“data”中。请检查响应对象的完整结构。是的，它现在正在工作，但您能告诉我为什么我们要使用“data”吗当Angular回调函数时，它会传递一个包含许多信息的对象，如响应头、http状态码等，返回的实际数据在属性“data”中。请检查响应对象的完整结构。