Unable to access property of an object in an angularjs controller but able to access it from the HTML

Question

The HTML code:

<div ng-controller="teamWiseResults as tr">
    <p>{{tr.fifteenData.data}}</p>
    <p>{{tr.fifteenData.data.name}}</p> <!--Prints the data and name within data perfectly-->
</div>

The Controller:

footieApp.controller("teamWiseResults",['yearFifteenData','yearSixteenData',function(yearFifteenData,yearSixteenData){
    var main = this;    
    main.fifteenData = yearFifteenData;
    console.log(main.fifteenData); //Prints perfectly on the console with the property "data" within it
    console.log(main.fifteenData.data); //Prints undefined even though it has the property "data" within it 
}]);

The service:

var footieApp = angular.module("footieApp", [])
    .service('yearFifteenData', function($http) {
        var main=this;
        $http({
            method: "GET",
            url: "https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json"
        }).then((response) => {
            main.data = response.data;
        }, (response) => {
            main.data = response.statusText;
        });
        console.log(main); //Prints the object perfectly, which has the property "data" within.
        console.log(main.data); //Gives undefined
        return main;
    });

What is happening is that when i use the service "yearFifteenData" within the controller, the http is properly called and gives a response which has the property data within it. I use this data from the response and pass it on to the controllers using it. These controllers are able to access the returned object from the service but not able to access it's properties.

Link of the respository :https://github.com/spramod49/PL-football-data-app

Thanks in advance!

your `main.data` only gets filled up with a value when promise resolution occurs (i.e. then()) until then it's undefined, if you need to further process this data maybe it would be a good idea to move it towards the controller — Andrei Roba, Nov 11 '17 at 16:48
can you please share the data you getting in main.fifteenData and main? — Rakesh Burbure, Nov 11 '17 at 18:23
@RakeshBurbure The data can be found in the URL of the http call in the code. — Pramod S, Nov 13 '17 at 04:45
@RobyRodriguez If that was the case, shouldn't "main.fifteenData" also give undefined. But this returns an object — Pramod S, Nov 13 '17 at 04:46

score -1 · Accepted Answer · answered Nov 12 '17 at 08:40

In your service

You must have in consideration the fact those .then() functions run asynchronously, meaning that the assignment of main.data will occur after your call of console.log.

Then, this should work:

var footieApp = angular.module("footieApp", [])
    .service('yearFifteenData', function($http) {
        var main=this;
        $http({
            method: "GET",
            url: "https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json"
        }).then((response) => {
            main.data = response.data;
            console.log(main.data); //Should not give undefined
        }, (response) => {
            main.data = response.statusText;
        });
        console.log(main); //Prints the object perfectly, which has the property "data" within.

        return main;
    });

In your controller

Try to put those console.log()s inside a $timeout, because the main.fifteenData.data is defined after an http call, which could take a couple of seconds:

footieApp.controller("teamWiseResults",['yearFifteenData','yearSixteenData', '$timeout',function(yearFifteenData,yearSixteenData, $timeout){
    var main = this;    
    main.fifteenData = yearFifteenData;
    $timeout(() => console.log(main.fifteenData.data), 2000);
    console.log(main.fifteenData); //Prints perfectly on the console with the property "data" within it
}]);

Again, you have to "wait until that promise (i.e. the .then()) inside your service has finished. Two seconds should be enough

Is it possible to this without the $timeout? by maybe changing the service? — Pramod S, Nov 14 '17 at 16:26
Sorry for the delay. There is a way that involves two promises, one in your service and another in your controller. There is a very easy to implement illustration in this answer: https://stackoverflow.com/a/25900116/7435861 This is, by default, the "normal" way for initializating variables. Normally, controllers must have defined an $onInit(), or maybe a custom init() method that calls all the services for setting the controller's variables. If you really need to have your variables initialized ASAP, try to use ng-if while they're not set. Hope this helps — diego92sigma6, Nov 17 '17 at 02:31

Unable to access property of an object in an angularjs controller but able to access it from the HTML

1 Answers1