AngularJS not returning data from $http rest request

Question

Any idea what I am doing wrong here? It must be something simple but I have been trying a bunch of different combinations for hours.

Thanks in advance.

https://plnkr.co/edit/3NkmhLVLTZe3aMoiK9Ff?p=preview

app.js

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

app.controller('fishHouseMonitorController', function($scope, $http) {
  $http.get("http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements")
    .then(function(response) {
      $scope.sensormeasurements = response.data;
      // do some error checking to ensure there is an element 0?
      $scope.selectedElement = $scope.sensormeasurements[0];
    });
});

index.html

<!DOCTYPE html>
    <html ng-app="fishHouseMonitorApp">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
            <script src="app.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        </head>
        <body>
            <div class="container" ng-controller="fishHouseMonitorController">
                <div class="row">
                    <ul class="list-group">
                        <li class="list-group-item" ng-repeat="sensormeasurement in sensormeasurements" ng-click="selectContact($index)">
                            <span>{{ sensormeasurement.sensorMeasurementDateTime }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </body>
    </html>

This works:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    {{ myData }}
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
        $scope.myData = response.data;
      });
    });
  </script>
</body>
</html>

This does not:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    {{ myData }}
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements").then(function(response) {
        $scope.myData = response.data;
      });
    });
  </script>
</body>
</html>

even though https://jsonlint.com/ validates http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements as valid JSON

Have you checked your debugger? Any errors in network tab? You cannot access an HTTP destination while running your application on HTTPS. — lin, Nov 24 '17 at 00:19
Thanks for the input @MikaS I am new to angular... can you show me in an example (with the code above) of how the catch() is used? — merkman, Nov 24 '17 at 01:32
The HTTP vs HTTPS could be the issue @lin ... is there a way to get plunker to run in HTTP and not HTTPS? — merkman, Nov 24 '17 at 01:57
It looks like that was the issue @lin.... can you make your comment an answer so I can mark it correct? Thanks — merkman, Nov 24 '17 at 02:20
You can see how catch works in this [answer](https://stackoverflow.com/a/32367420/8574934). It won't solve the issue, which it looks like is solved already, but you still need it to handle errors. — Mika Sundland, Nov 24 '17 at 09:00

score 1 · Accepted Answer · answered Nov 24 '17 at 02:39

You cannot access an HTTP destination while running your application on HTTPS. Change your protocol to HTTPS and you will be fine:

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
    $scope.myData = response.data;
  });
});
</script>

score 0 · Answer 2 · answered Nov 24 '17 at 00:42

I did not fully understand the problem.I hope this helps

app.js

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

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

   $http.get("http://www.eastcentralmdaa.org/fishhousemonitor
/api/v1/sensormeasurements")
     .then(function(response) {
      $scope.sensormeasurements = response.data[0];
      // do some error checking to ensure there is an element 0?

    });
 });

index.html

 <ul class="list-group">
   <li class="list-group-item" ng-model="sensormeasurements" ng-click="selectContact($index)">
      <span>{{ sensormeasurement.sensorMeasurementDateTime }}</span>
   </li>
 </ul>

AngularJS not returning data from $http rest request

2 Answers2