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'
    },

You cannot return a value from a promise .then. Its async and the calling code has moved on by the time the promise return is called. — ste2425
– ste2425, Commented Sep 14, 2016 at 7:51

Graham · Accepted Answer · 2017-09-23 01:32:47Z

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.

edited Sep 23, 2017 at 1:32

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered Sep 14, 2016 at 7:53

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ludwig Over a year ago

This is how the service looks now:

fetch: function(id) {       var result = quizResource.get({id: id});        result.$promise.then(function(quiz) {         service.setCurrent(quiz);       });        return result;     },

AndreaM16 Over a year ago

Hi @Marco, edit your question and add Service's Code and code where you are trying to call Service's Promise.

AndreaM16 Over a year ago

Edited my answer.

Hykalos · Accepted Answer · 2016-09-14 08:35:21Z

0

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;});

answered Sep 14, 2016 at 8:35

Hykalos

512 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular - how to access object from promise

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related