Accessing returned data from service in the controller in AngularJS

Question

I am working in a project that has AngularJS front-end and ASP.NET Web API back-end.

I have a service that calls the web API and returns a bunch of JSON data. I am trying to access that data in my controller, but I get an error saying the property I'm after is undefined! The property I'm after is the RegisteredKeeperName.

$scope.getCrateDetails = function (result, isInsert) {
    $scope.showCrateDetails = true;
    getCrateDetails();

    if (!$scope.premiumCrate.RegisteredKeeperName.toLowerCase().indexOf("Green Farm") > -1) {
        $scope.calloutClass = 'callout-danger';
        $scope.calloutMessage = 'We (Green Farm) cannot provide this service with the necessary documents.';
    } else {
        $scope.calloutMessage = 'All is good!';
    }
};

Even though when I print out the $scope I can see the property I'm after is populated with the correct information!

{{premiumCrate.RegisteredKeeperName}}

My service code like so:

function getCrateDetails() {
    // service call goes here.
    stockData.GetCrateDetails($scope.premiumCrate.Id).then(
        function (cData) {
            $scope.premiumCrate = cData;
        },
        function () {

        });
};

you must be having asynch issue with ajax. Please show your code that loads RegisteredKeeperName — Khanh TO
– Khanh TO, Commented Jun 16, 2014 at 13:01
Service code added. Let me know if you require any other information. — J86
– J86, Commented Jun 16, 2014 at 13:12

tymeJV · Accepted Answer · 2014-06-16 13:19:07Z

1

getCreateDetails is an async call (you're trying to use the data before it has been returned and assigned), you should return that call using .then and access it in the controller, like so:

function getCrateDetails() {
    return stockData.GetCrateDetails($scope.premiumCrate.Id).then(function (cData) {
        return cData.data;
    }, function () {

    });
};

And make the call:

getCrateDetails().then(function(data) {
    console.log(data); //hey data!
    $scope.premiumCrate = data;

    if (!$scope.premiumCrate.RegisteredKeeperName.toLowerCase().indexOf("Green Farm") > -1) {
        $scope.calloutClass = 'callout-danger';
        $scope.calloutMessage = 'We (Green Farm) cannot provide this service with the necessary documents.';
    } else {
        $scope.calloutMessage = 'All is good!';
    }
});

answered Jun 16, 2014 at 13:19

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

Accessing returned data from service in the controller in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related