How to access sub objects of an object returned by AngularJS data service inside controller

Question

I have an angularjs data factory that makes a server call and sets the returned data in the factory returned object like this

 angular.module('app').factory('DataService', function() {
        // Returning object
        return {
            data: {},
            isLoaded: false,
            getData:getdata

        };
        function getData() {
            var self  = this;
           //Some Ajax Call returns an 'dataObject'
           self.data = dataObject; //dataObject has a few subObjects and list
        }
 });

Now inside my angularjs controller I am making call to the DataService.getData() to make ajax call and hence set the returned dataObject within factoryobject 'data'

and I have declared it in controller like this

appV.data = DataService.data;

If I try to print it on console or access like this console.log(appVm.data), I am able to access it, but if I try to access any subObjects like Ex - appVm.data.property1 or appVm.data.subObject1.subObject1.property, it gives undefined.

Can someone please explain why this behavior is occuring ?

Thanks in Advance

you may need to `resolve `method, load data before loading controller — Muhammad Shahzad, Apr 12 '16 at 11:53

score 0 · Answer 1 · edited May 23 '17 at 12:24

It is just example:

app.factory("messageService", function($q){
    return {
        getMessage: function(){
            return $q.when("Hello World!");
        }
    };
});

And now the routing configuration that will use the service in a resolve.

$routeProvider
    .when("/news", {
        templateUrl: "newsView.html",
        controller: "newsController",
        resolve: {
            message: function(messageService){
                return messageService.getMessage();
        }
    }
})

These link may help you:

Link 1, Link 2

How to access sub objects of an object returned by AngularJS data service inside controller

1 Answers1