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!

Answer 1

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 (ie the .then() ) inside your service has finished. Two seconds should be enough