Home / Questions / 24506
Accepted
Augusto Herbel
Asked: 2020-09-21 16:51:17 +0800 CST 2020-09-21 16:51:17 +0800 CST

Problem consuming REST service with AngularJS

  • 772

Well my problem is the following: I have a web application with AngularJSwhich I get dog data from a database with an Servicio RESTimplemented with Jersey, and I want to display it in a table. The problem is that when the page loads, it makes the request through the service to the database and since it takes time to fetch the data from the database, it first renders the HTML, and since at that moment the variable that receives the data from the database( listaMascotas) has nothing, shows nothing. And well, that is the question, what strategies can be used to solve this problem? I've been doing some research but I can't find anything that helps me solve the problem. I am new to this AngularJS.

Here is the view of the page and where I want the table to be seen, I still need Bootstrapto learn how to style it: viewpage

I leave you my index.html: index.html

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

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

angularjs

1 Answers

  1. Best Answer

    Your problem is that your service is asynchronous so it doesn't actually return the value, 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 finish.

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

    You should try changing the code as follows:

    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 like jquery and bootstrap are .

    What is a promise?

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

    This allows you to attach handlers to asynchronous actions (such as querying a web service) that will eventually succeed or fail. Thus, asynchronous methods that one constructs (such as you with your "pets" factory) do not return the final value, but rather a promise for the value at some point in the future.

    promise

    https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

    • 3