angular http get request through service needs refresh to show data

Question

I found many similar questions but I couldn't apply the solutions to my problem.

So in my angular app I am drawing nvd3 charts.

I am doing a get request in the service and I can see from the network in my browser that I am ALWAYS getting the chart data as I am supposed to.

The problem is that, when I am running grunt serve to start my angular app, I am still getting the data through the api, but for some reason they are not shown.

That just happens only when I run grunt serve. However, if I hit refresh, after running grunt serve, the data are shown correctly.

Thanks in advance for any help.

this is what I am trying to do:

'use strict';

angular.module('myApp')
.service('mainService', function($http) {
  this.getData = function() {
    return $http({
      method: 'GET',
      url: '/rest/api/config',
    });
  }
})
.controller('MainCtrl', function($scope, $http, mainService) {
  var name = 'main';
  var model; 

  mainService.getData().then(function(d) {
    model = d.data;
    $scope.modelling();
  });

  $scope.modelling = function() {
    if(!model) {
      console.log("no model");
      // set default model for demo purposes
      model = {
        title: "about",
        structure: "12/4-4-4",
    };
  }

  console.log(model);
  $scope.name = name;
  $scope.model = model;
  $scope.collapsible = true;
  }
});

What do you mean by "data are not shown" ? Do you mean your code is running default model generation "about - 12/4-4-4" ? — Cyril Duchon-Doris, Sep 18 '14 at 12:35
@CyrilDD I mean the nvd3 charts are not drawn. So, I am getting the data from my server to draw nvd3 charts. I am getting the data but I am doing something wrong with the order of stuff, that's why I need to refresh initially to draw the graphs. — Nicolas Nicolas, Sep 18 '14 at 13:15
I think its because the getData request is async, so that $scope.model is going to be undefined at first. — reptilicus, Sep 18 '14 at 13:21
@reptilicus I had similar thoughts. Do you know how to resolve this ? — Nicolas Nicolas, Sep 18 '14 at 13:23
getData is async yes, but as soon as the data is received the angular framework should do its job. — Cyril Duchon-Doris, Sep 18 '14 at 14:00

reptilicus · Answer 1 · 2014-09-18T14:20:44.013

Try something like this. Initially, in your example, $scope.model is going to be undefined.


.controller('MainCtrl', function($scope, $http, mainService) {
  var name = 'main';

mainService.getData().then(function(d) {
    $scope.modelling(d.data);
  });

$scope.modelling = function(data) {
    //do something with data here, or set 
    $scope.model = data;
  }

$scope.name = name;
  $scope.collapsible = true;
}
});

That might work, depends on how you set up the nvd3 charts.

angular http get request through service needs refresh to show data

1 Answers1