Angular - how to access object from promise

Question

I am getting an object in my app by calling a function in service like this:

$scope.quiz= QuizService.fetch($stateParams.quiz).$promise.then(function(result) {
      return result;

When I do console.log($scope.quiz) I get this:

Promise {$$state: Object}
   $$state:Object
   status:1
   value:m
     $promise:Promise
     $resolved:true
     active_question_id:1275
     code:7690
     id:200
     mode:"multiplayer"
     players:Array[2]
     questionCount:7
     question_time:10000
     status:"active"
     subjects:Array[0]
     token:"i2L6OLEfAqfD3tLUCMzx"
     topics:Array[0]
     years:Array[1]
     __proto__:Object
   __proto__:Object
 __proto__:Object

I would like to access object properties years, subjects and topic and loop through them, but when I do console.log($scope.quiz.years) I get

undefined

The service looks like this:

fetch: function(id) { 
  var result = quizResource.get({id: id});

  result.$promise.then(function(quiz) { 
    service.setCurrent(quiz); }); 

  return result; 
  },

And the quizResource in QuizService looks like this:

var quizResource = $resource(
    AppSettings.apiUrl + '/quizzes/:id/:verb',
    {
      id: '@id'
    },

Answer 1

Essentially, you need to chain your functions using promises and resolve or callback. You should refactor both of your functions fetch and resourceGetter using promises. You can use the pattern that I provide below (Take a look here), use $q provider and many other variations.

You should build your QuizService like

(function () {
 'use strict';

angular
  .module('myApp')
  .service('QuizService', function ($resource, AppSettings) {

    function resourceGetter() {
      return new Promise(function (resolve) {
        return resolve ($resource(
                   AppSettings.apiUrl + '/quizzes/:id/:verb',
                       {
                          id: '@id'
                       }
        });
      })
    }

    function fetchAndSet(params) {
      return new Promise(function (resolve, reject) {
        resourceGetter().then(function(response){
          if(response){
          return Promise.resolve(setCurrent(response));
        }
          return reject({error : 'Error while fetch'});
        })
      })
    }

    return {
      fetchAndSet: fetchAndSet
    }
});
})();

And then on your modules, lets say a Controller

. . .
QuizService.fetchAndSet(parameter).then( function(result){
 if(result.error){
    console.log('Error ':result.error);
 }
 console.log('Got '+result+' from fetch');
});

Of course, you can also refactor setCurrent to follow this pattern.

This code is not guaranteed to work 100% since I don't know exactly what you are trying to do and You did not provide a Plunker or similar.

I'm sure that if you take a look at my code and the links I provided you'll make it work.

Hope I've been helpful.

Answer 2

I believe the problem lies in that you set

$scope.quiz= QuizService.fetch($stateParams.quiz).$promise.then(function(result) {
  return result;

Put the assignment inside the callback instead, so you don't set the variable to the promise e.g.:

QuizService.fetch($stateParams.quiz).$promise.then(function(result) {
  $scope.quiz = result;});