1

这将是一个非常笼统的问题，所以提前道歉。我有一个 python API 调用，我正在尝试将其“转换”为 JS 和 HTML，以便可以使用数据创建仪表板。它的作用是显示一个数字数据，我们可以假设它是“500”。

这是我完美运行的 Python 类：

url = 'https://someURL'

headers = {
    "Authorization":"Bearer XXXX-XXXX", 
    "Content-Type":"application/json"
}

r = requests.get(url, headers=headers)
result = r.json()
print(result['Power'])

这会从 API 返回一个数字。再一次，让我们假设它是“500”。现在是我对 JS 的尝试：mainJS.js

var app = angular.module('tabletApp',[]);

app.controller('tabletCtrl',function($scope, $interval, $http){


    var dataType = "json";

    $scope.getData = function(){

      var req = {
        method: 'POST',
        url: "https://XXXX",
        headers: {
          'Content-Type': 'application/json',
          'Authorization':'Bearer XXXX',
        data: postBody
      };

       $http(req).then(function(response) {
        var data = response.data.result['consumptionPower'];

         $scope.kw = response.data.result['consumptionPower'];
         $scope.cost = calculateTouCost($scope.kw);
       },
       function(data) {
             console.log(data);
       });
    }

    $scope.getData();
    $interval($scope.getData,10000);
});

这是在网页中显示数据的支持 HTML。索引.html

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="mainJS.js"></script>
</head>
<body class="black" ng-app="tabletApp" ng-controller="tabletCtrl">
    <div class="container center" class="black" >
        <center><p><b><h1>ACTIVE WATTS FROM API: {{kw}}</h1></b><p></center>
    </div>
</body>

</html>
4

0 回答 0