title: Getting no data when converting Python API call to Javascript and HTML
body: <p>This is going to be a very generic question, so apologies in advanced. I have a python API call that I am trying to 'convert' to JS and HTML so I can create a dashboard with the data. What it does is display one numerical piece of data which we may assume is "500".</p>
  
  <p>Here is my Python class which works perfectly:</p>
  
  <pre><code>url = 'https://someURL'
  
  headers = {
      "Authorization":"Bearer XXXX-XXXX", 
      "Content-Type":"application/json"
  }
  
  r = requests.get(url, headers=headers)
  result = r.json()
  print(result['Power'])
  </code></pre>
  
  <p>This returns a number from the API. Again, let's pretend it's "500". Now ere is my attempt at the JS: <b>mainJS.js</b></p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>And here is the supporting HTML to display the data in a webpage. <b>index.html</b></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="mainJS.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="black" ng-app="tabletApp" ng-controller="tabletCtrl"&gt;
      &lt;div class="container center" class="black" &gt;
          &lt;center&gt;&lt;p&gt;&lt;b&gt;&lt;h1&gt;ACTIVE WATTS FROM API: {{kw}}&lt;/h1&gt;&lt;/b&gt;&lt;p&gt;&lt;/center&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>