angularjs undefined resource

Question

I am new in angularJs, I am trying to have my first steps in developping an application and I am facing a problem.

I am calling an external resource that return an object json via $resource.get(), in the callBack I am getting the correct values, but in the service the values are undefined, the problem is when I am printing the resource in the console the result has the correct values.

my json object :

{
"readOnly": false,
"questions": [
{
    "questionId": "0",
    "questionTitle": "question0",
    "isMondatory": true,
    "responseList": [
        {
        "questionId": "0",
        "questionTitle": null,
        "responseId": "00",
        "responseTitle": "response00"
        },
        {
        "questionId": "0",
        "questionTitle": null,
        "responseId": "01",
        "responseTitle": "response01"
        },
        {
        "questionId": "0",
        "questionTitle": null,
        "responseId": "02",
        "responseTitle": "response02"
        },
        {
        "questionId": "0",
        "questionTitle": null,
        "responseId": "03",
        "responseTitle": "response03"
        }
        ]
    },
    {
    "questionId": "1",
    "questionTitle": "question1",
    "isMondatory": true,
    "responseList": [
        {
        "questionId": "1",
        "questionTitle": null,
        "responseId": "10",
        "responseTitle": "response10"
        },
        {
        "questionId": "1",
        "questionTitle": null,
        "responseId": "11",
        "responseTitle": "response11"
        },
        {
        "questionId": "1",
        "questionTitle": null,
        "responseId": "12",
        "responseTitle": "response12"
        },
        {
        "questionId": "1",
        "questionTitle": null,
        "responseId": "13",
        "responseTitle": "response13"
        }
        ]
    }

my controller is

app.controller('mycontroller', function ($scope,myservice) {
 $scope.infos = null;
 $scope.infos = myservice.getInfo();  
}

my service is :

angular.module('xxxx').factory('myservice', function($window,$resource,$routeParams,$http,apicallservice) {

// Public API here
return {

    getInfo : function(){
        var result=null;
        var url = "myUrl";
        result = apicallservice.GetApiCall(url,$routeParams);
        console.log(result.readOnly); // print undefined => KO
        return result;
},
//.... other functions

my apicallservice :

angular.module('xxxx')
  .factory('apicallservice', function ($http,$resource) {

  var result;

// Public API here
return {

  GetApiCall: function (url,obj) {

      // resource         
      var resource = $resource(url,{param1:obj});

      // cal the api              
      result = resource.get(function(callBack) {
          console.log(callBack.readOnly); => print false => OK
          return callBack;
    }, function(error) {
        console.log(error);         
        return error;
    });


    return result;
  },

  PostApiCall : function(url,obj){
      result = $http.post(url,obj).then(
              function (response) {
                    console.log(response);
                  }, function (error) {
                    console.log(error);
                  });
  }
};

});

please can you help me ? thanks in advance.

Answer 1

I found what was going wrong, in the controller I had to add then() : instead of this :

 app.controller('mycontroller', function ($scope,myservice) {
  $scope.infos = null;
  $scope.infos = myservice.getInfo();  
 }

do this :

app.controller('mycontroller', function ($scope,myservice) {
 $scope.infos = null;
  myservice.getInfo().then(function(data) {  
           $scope.infos = data;
        });  
}

this resolved the problem.