Asynchronous data retrieving in javaScript

Question

I there,

I'm building an Angular.js app with the help of Restangular and angular-local-storage. I need to retrieve some data from a RESTFull service server and assign it to a $scope variable.

I would like to know how could I wait for all that data to load before loading it to my view (html).

Here's what I've done so far:

app.controller('InventoryController', function($scope, inventoryService) {                        
  $scope.productList = inventoryService.getProduces();
  console.log($scope.productList); // At that point, $scope.productList is null
});

app.service('inventoryService', function(entityService, browserStorageService) {
  entityService.allUrl('product', entityService.getBaseUrl).getList().then(function(data){
    console.log(data); // The data variable is not null here.
    browserStorageService.set('producList', data);
  });

  this.getProduces = function() {
    return browserStorageService.get('producList');
  };
});

app.service('browserStorageService', function(localStorageService) {
  localStorageService.clearAll();
  return localStorageService;
});

app.service('entityService', function(Restangular) {
  Restangular.setBaseUrl('http://localhost:8000/rest/');
  return Restangular;
});

I'm not at all comfortable with the asynchronous nature of JavaScript, I'm sure it's pretty simple, but I can't get my head around what I can do to correct the situation.

The data is not loader into the page at the fist call made to the controller, but when I call it again without reloading the app, the data is there.

Thanks for your help!

Have you seen this question stackoverflow.com/questions/16286605/… It seems similar — Zack
– Zack, Commented Jul 22, 2014 at 17:38

Krzysztof Safjanowski · Accepted Answer · 2014-07-22 18:49:30Z

1

Instead of calling inventoryService.getProduces(); in controller you must create resolve object in config section of application with data from service. After that you can have access to data passed to controller.

app.config(function($routeProvider){
    $routeProvider
    .when('/',{
        template:'',
        controller: 'InventoryController',
        resolve:{
            products: function(inventoryService) {
               return inventoryService.getProduces();
            }
        }
    });
});

app.controller('InventoryController', function($scope, products) {                        
    $scope.productList = products;
    console.log($scope.productList);
});

Template and route path should be setup according to your application structure.

answered Jul 22, 2014 at 18:49

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

leseulsteve Over a year ago

Thanks, I'm getting to love AngularJs, so smart hehe

leseulsteve Over a year ago

You put me on the right direction, but now the probleme is where the InventoryService call the browserStorageService to get the ProduceList in the method getProduce().

leseulsteve Over a year ago

It seams that the browserStorageService.get('producList'); call is asynchronous to, so it return a unassigned variable to, same problem but a bit further down the process! I mark your response has a good one because it was the right way to do it, if I don't use my browserStorageService and return the values straight from my entityService it works.

leseulsteve Over a year ago

To get the requested object in cache, I switch to angular-cached-resource witch work like a charm since my app won't always have access to the server (inventory in a freezer :).

Collectives™ on Stack Overflow

Asynchronous data retrieving in javaScript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related