Angularjs controller method arg is undefined

Question

I'm trying to get a link on a page to basically load a block of data from a database, then perform a function on that data. The method that gathers the data from the database works (I can see it if I step through in the browser after clicking the link), the problem is that the method which is meant to then process the data sees it as 'undefined'...it seems like a scoping thing to me, but I'm not sure what I'm doing wrong. Currently I just have a console log message inside the processData method, until I can resolve this issue. Here is the HTML for the link:

<div ng-show="Base" >
    <a data-toggle="collapse" data-parent="Base" ng-click="processData(getDataFromDb('key101'))">Process Data</a>
</div>

And here are the controller methods (I didn't want to dump a ton of HTML in here, but further up I init the controller with ng-controller="dataProcessor"):

angular.module('baseApp').controller('dataProcessor', function($scope, $http) {
$scope.getDataFromDb = function(key) {
    $http.get('/trm/get_data_from_database?key='+key).then(function(response) {
        return response.data.block;
    }, function errorCallback(response) {
            console.log('Failed')
    });
};
$scope.processData = function(data) {
    console.log(data);
}
});

The end result is that when the link is clicked, getDataFromDb is called and the data is pulled from the database, that part works, it's just that when processData is called with the return from getDataFromDb as its arg, when I set a breakpoint and look at the 'data' arg in processData, it's 'undefined'.

Does anyone know what I'm doing wrong? Thanks!

`$scope.getDataFromDb = function(key) {` is an async function - so your return isn't doing anything - and your parameter is never passed properly. See: http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success — tymeJV, Apr 28 '17 at 19:53

score 2 · Accepted Answer · answered Apr 28 '17 at 20:04

Template:

<div ng-show="Base" >
    <a data-toggle="collapse" data-parent="Base" ng-click="processData('key101')">Process Data</a>
</div>

contoroller:

angular.module('baseApp')
 .controller('dataProcessor', function($scope, $http) {
    $scope.getDataFromDb = function(key) {
        return $http.get('/trm/get_data_from_database?key='+key).then(function(response) {
            return response.data.block;
        }, function errorCallback(response) {
                console.log('Failed')
        });
    };
    $scope.processData = function(key) {
        $scope.getDataFromDb(key)
          .then(function(data){
             console.log(data); 
          });
    };
 });

score 0 · Answer 2 · answered Apr 28 '17 at 20:05

0

Change:

$http.get('/trm/get_data_from_database?key='+key).then(function(response) {
    return response.data.block;
}, function errorCallback(response) {
        console.log('Failed')
});

to

return $http.get('/trm/get_data_from_database?key='+key).then(function(response) {
    return response.data.block;
}, function errorCallback(response) {
        console.log('Failed')
});

answered Apr 28 '17 at 20:05

D Vorona

136
1
8

Yes, what @ajai Jothi said – D Vorona Apr 28 '17 at 20:06

Abdelrhman Hussien · Answer 3 · 2017-04-28T20:10:57.523

no it's not scoping problem, you can't return data from http get promise you have to handle it all of the business inside the resolve function. And that's very logic because the time you execute GET function you will not get the data immediately, there is a time till the server response back which means processData function will execute before the server response back.

so you should do it like that:

angular.module('baseApp').controller('dataProcessor', function($scope, $http) {
    $scope.getDataFromDb = function(key) {
        $http.get('/trm/get_data_from_database?key='+key).then(function(response) {
            $scope.processData(response.data.block);
        }, function errorCallback(response) {
                console.log('Failed')
        });
    };
});

Good luck

Angularjs controller method arg is undefined

3 Answers3