CODEWITHSUNDEEP
javascriptangularjsajaxhttp
Paymon Wang-Lotfi
Paymon Wang-Lotfi

Reputation: 555

Making a simple AJAX call with AngularJS

I am very new to Angular JS and just trying to learn the basics. I think I am having an issue with assigning the JSONObject to $scope.talks. The table does now show any values.

Here I make a call to retrieve the JSONObject:

<script type = "text/javascript">
var myApp = angular.module('myApp',[]);
myApp.factory("EventsService", function ($http, $q) {
 return {
 getTalks: function () {
 // Get the deferred object
 var deferred = $q.defer();

 // Initiates the AJAX call
 $http({ method: 'GET', url: 'http://localhost:8080/greeting'
}).success(deferred.resolve).error(deferred.reject);
 // Returns the promise - Contains result once request completes
 return deferred.promise;
 }
 }
});
myApp.controller("HelloWorldCtrl", function ($scope, EventsService)
{
 EventsService.getTalks().then(function (talks) { 
 $scope.talks = talks.data
}, function ()
 { alert('error while fetching talks from server') })
});
</script>

The JSONObject returned by the call is the following:

{"talks":[{"duration":"45","venue":"5","speaker":"bill gates","name":"test","id":"45"},{"duration":"45","venue":"2","speaker":"bill gates","name":"another test","id":"33"}]}

And here is the code to render the data: 

<body ng-app="myApp" ng-controller = "HelloWorldCtrl" style="font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif">
<table class ="table table-condensed table-hover">
<tr>
<th>Id</th>
<th>Name</th>
<th>Speaker</th>
<th>Venue</th>
<th>Duration</th>
</tr>
<tr ng-repeat = "talk in talks">
<td>{{talk.id}}</td>
<td>{{talk.name}}</td>
<td>{{talk.speaker}}</td>
<td>{{talk.venue}}</td>
<td>{{talk.duration}}</td>
</tr>
</table>
</body>

Upvotes: 0

Views: 65

Answers (2)

Juanjo Salvador
Juanjo Salvador

Reputation: 1093

getTalks function must be something like:

getTalks: function () {
   return $http.get('http://localhost:8080/greeting');
 }

The Angular method $http will return a promise. In your code, you are returning a promise inside another promise. My code fix that and make it cleaner.

Then, in your controller, put:

myApp.controller("HelloWorldCtrl", function ($scope, EventsService) {
    $scope.talks = EventsService.getTalks().then(
        function(res) {
            return res.data;
        }, 
        function(err) { 
           console.log("An error has ocurred!", err);
        }
    )
});

Using then() you're resolving the promise. Is a good practice to use the JavaScript console instead of alerts or prints in your code.

Good luck!

Upvotes: 0

Deep
Deep

Reputation: 9794

There is no talks.data property in your response object.

{"talks":[{"duration":"45","venue":"5","speaker":"bill gates","name":"test","id":"45"},{"duration":"45","venue":"2","speaker":"bill gates","name":"another test","id":"33"}]}

You should assign the scope variable as

$scope.talks = talks.talks

The controller will look like

myApp.controller("HelloWorldCtrl", function ($scope, EventsService)
{
 EventsService.getTalks().then(function (talks) { 
 $scope.talks = talks.talks
}, function ()
 { alert('error while fetching talks from server') })
});

Upvotes: 1

Related Questions