CODEWITHSUNDEEP
angularjsrest
merkman
merkman

Reputation: 89

AngularJS not returning data from $http rest request

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

Upvotes: 1

Views: 122

Answers (2)

lin
lin

Reputation: 18402

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>

Upvotes: 1

Onur &#214;nder
Onur &#214;nder

Reputation: 311

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>

Upvotes: 0

Related Questions