Problem when consuming REST service with AngularJS

Question

Problem when consuming REST service with AngularJS

Navigation

#1 by (3 votes)

0

Well my problem is this: I have a web application with AngularJS with which I get data from dogs in a database with Servicio REST implemented with Jersey , and I want to show them in a table. The problem is that when the page loads the request through the service to the database and as it takes to bring the data from the database, first render the HTML , and as at that moment the variable that receives the Data from the database ( listaMascotas ) has nothing, shows nothing. And well, that's the question, what strategies to solve this problem can be used? I've been doing some research but I can not find anything to solve the problem. I'm new in this AngularJS .

Here is the view of the page and where I intend to see the table, I need to learn Bootstrap to put the style:

I leave my index.html :

This is the controller in charge of the table ( ListController.js ):

And this is the service I did ( mascotas.js ), which in turn is used by the controller ListController , and which is responsible for making requests to the back-end:

angularjs rest

asked by Augusto Herbel 21.09.2016 в 02:51

source

1 answer

I get an error Exception in thread "main" java.lang.NullPointerException Sort a list by a certain element of the C ++ class

score 3 · Accepted Answer

Your problem is that your service is asynchronous so it does not really return the value, but instead you get a promise object.

You need to correct your services because you are forgetting the "return" .

var guardar = function(mascota){
    return $http.post("rest/services/save/"+mascota)
    .then(function(response){
        return response;
    });
};

Second, when you consume the service you should not assign the promise object, but get its value waiting for it to end.

//Estas asignando una promise, no el resultado.
$scope.listaMascotas = mascotas.listar();

You should try changing the code in the following way:

mascotas.listar().then(function(data){
   $scope.listaMascotas = data;
});

Additionally, the angular application scripts are in the header, I would recommend that they be at the end of the body as they are jquery and bootstrap .

What is a promise?

A promise object is used for asynchronous processing. A promise represents a value that may be available at this time, or in the future, or never.

This allows associating handlers with asynchronous actions (such as consulting a web service) that will eventually be successful or fail. Thus, the asynchronous methods that you build (like your factory "pets") do not return the final value, but a promise for value at some point in the future.

link