angular.js getting var from inside function

Question

I am getting data from the server with a service which is being called in this function:

LeadsSrv.async().then(function (d) {
    results = d.data;
});

I want to access the results outside of this function and then assign it to the scope, like this:

$scope.All_Leads = results;

Here is the server function:

LeadApp.service('LeadsSrv', function ($http) {
  var all = {
    async: function() {
        var promise = $http({
            url: '../app/Data.php',
            method: "POST",
            params: { req_id: 'leads_list', user_id: 1 }
        }).then(function (response) {
        return response;
      });
      return promise;
    }
  };
  return all;
});

How can i achieve this?

Is the server function being called in an Angular service or is it within a controller? — navigator, Mar 15 '16 at 12:21

Alex Szabo · Accepted Answer · 2016-03-16T21:42:33.963

3

You declare the variable at the beginning of your script, then whenever the function fetching the data returns, it will update the value of that variable.

$scope.results = [];

LeadsSrv.async().then(function (d) {
    $scope.results = d.data;
});

Thanks to how angular works, you won't need to do anything else, it will also update the UI elements and bindings as well.

Update:

I'd do it this way:

Service:

LeadApp.service('LeadsSrv', function ($http) {
    var service = {
        postData: postData
    };

    return service;

    function postData(data) {
        return $http.post('../app/Data.php', data);      
    }

In the Controller:

//Initialize the variable
$scope.results = [];

var data = {
    req_id: 'leads_list',
    user_id: 1
};

LeadsSrv.postData(data).then(function (response) {
    //Once the $http.post succeeds, it will update your variable
    $scope.results = response.data;
});

This should do exactly what you're looking for, unless I've misinterpreted your question.

edited Mar 16 '16 at 21:42

answered Mar 15 '16 at 12:19

Alex Szabo

3,274
2
18
30

yes your solutions works but am getting the data from the server which worked before also, but my question is how can i now access the scope var outside of the function to make it available on my entire site? – jhon dano Mar 15 '16 at 16:48
@jhondano could you please specify "entire site"? Is it all in angular, or is it a mix, etc? – Alex Szabo Mar 15 '16 at 18:49
The site is all in angular! – jhon dano Mar 15 '16 at 18:51
If you only use one controller, it should be available by `$scope.results` inside angular, or `{{results}}` in HTML. – Alex Szabo Mar 15 '16 at 19:28

score 0 · Answer 2 · answered Mar 15 '16 at 12:20

I recommend going about this in following fasion.

Make your controller/directive ( whoever owns the $scope ) dependent on LeadSrv object. If it is not an "angular" component already wrap it in a factory, then inject it in your controller.

Then you simply do

LeadsSrv.async().then(function (d) {
    $scope.All_Leads = d.data;
});

score 0 · Answer 3 · answered Mar 15 '16 at 12:23

Currently, you are doing the right thing, except of one mistake: Your call is getting executed asynchronously. So that basically means, results won't have the expected value the time you are referring it to $scope.All_Leads, since the declaration is happening synchronously.

To achieve what you want, you have to use promises. Take a look at this and Angulars documentation.

score 0 · Answer 4 · answered Mar 15 '16 at 16:32

To check if your server is reporting an error, add a .catch method.

LeadsSrv.async().then(function onFulfilled(r) {
    console.log("DATA: ", r.data);
    $scope.results = r.data;
}).catch( function onRejected(response) {
    console.log("ERROR: ", response.status);
});

angular.js getting var from inside function

4 Answers4