Getting data from a web service with Angular.js
50,128
You should put your $http.get inside your controller.
Also, the web service returns an object not an array. So your ng-repeat should be something like this: book in data.books
Here is a working example:
var app = angular.module('booksInventoryApp', []);
app.controller('booksCtrl', function($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
.then(function(response) {
$scope.data = response.data;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="booksInventoryApp">
<section ng-controller="booksCtrl">
<h2 ng-repeat="book in data.books">{{book.name}}</h2>
</section>
</article>
Author by
Vandervidi
Updated on July 31, 2020Comments
-
Vandervidi almost 4 years
Im trying to get data in a Json format from a remote WS using Angular and im having some trouble. The data comes from the web service correctly but i cant use it inside the controller. Why is that? Angular Code:
var booksJson; var app = angular.module('booksInventoryApp',[]); // get data from the WS app.run(function ($http) { $http.get("https://SOME_API_PATH").success(function (data) { booksJson = data; console.log(data); //Working }); }); app.controller('booksCtrl', function ($scope) { $scope.data = booksJson; console.log($scope.data); //NOT WORKING });
HTML:
<section ng-controller="booksCtrl"> <h2 ng-repeat="book in data">{{book.name}}</h2> </section>
-
Vandervidi almost 9 yearsThank you mate. This is perfect.
-
Ben Cameron about 8 yearsNice answer. The .success method has now been depreciated. You should use the .then method now. docs.angularjs.org/api/ng/service/$http
-
Donal about 8 years@BenCameron ok, thanks. I have updated the answer with that change now.