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
– lin, Commented Nov 24, 2017 at 0: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
– merkman, Commented Nov 24, 2017 at 1: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
– merkman, Commented Nov 24, 2017 at 1:57
It looks like that was the issue @lin.... can you make your comment an answer so I can mark it correct? Thanks — merkman
– merkman, Commented Nov 24, 2017 at 2:20
You can see how catch works in this answer. It won't solve the issue, which it looks like is solved already, but you still need it to handle errors. — Mika Sundland
– Mika Sundland, Commented Nov 24, 2017 at 9:00

lin · Accepted Answer · 2017-11-24 02:39:46Z

1

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>

answered Nov 24, 2017 at 2:39

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Onur Önder · Accepted Answer · 2017-11-24 00:42:41Z

0

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>

answered Nov 24, 2017 at 0:42

Onur Önder

3111 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS not returning data from $http rest request

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related