Help me understand FBInstant.player.getDataAsync()

[abdel]

Hello guys,

The perpose is that I would to get my custom data lets tell its the coins for the active player on FB instant game.

From the docs I did:

FBInstant.player.getDataAsync(['coins'])
  .then(function(data) {
     console.log('data is loaded');
     var coins = data['coins'];  
});

But when I want to set my texts like:

this.coinsText.setText(coins);

I got an error.

// coins is undefined.
 

So I think that I did not understand the concept of PROMISE in javascript that FB uses.

 

There is someone who can explain me the concept a snipset is very welcome just to understand.

 

Thanks very much.

[b10b]

The scope of "coins" is set within the anonymous-function that is being called by the return of the promise.  So it will be "undefined" outside of that function.  So either setText() directly within the anon-function, or have the anon-function assign a value to a "coins" property that resides outside of that scope.  Or don't use anon-functions, but that's a bigger story and probably off topic.  Either way not an issue with FBInstant.player.getDataAsync or even Promises, just an issue with understanding scopes within functions.

[Noel]

@abdel What @b10b means is that you should do either

FBInstant.player.getDataAsync(['coins'])
  .then(function(data) {
     console.log('data is loaded');
     var coins = data['coins'];
     this.coinsText.setText(coins);
});

or

var coins = 0;
FBInstant.player.getDataAsync(['coins'])
  .then(function(data) {
     console.log('data is loaded');
     var coins = data['coins'];
     // You could call a function here to update the coins and do other things
});
And later (or in the function mentioned above) call this.coinsText.setText(coins)

[abdel]

Hy and tx for you guys @b10b & @Noel I will give a try to the snipset.

Tx very much.

[abdel]

Hy again after getting mu hands dirty here I can't make it done, here is my scripts and the associated log:

---------Menu.js--------

var player = {_coinsVal: 0};

class Menu extends Phaser.Scene {
     constructor () {
        super('Menu');
     }
   
     create () {
         console.log(1+player._coinsVal.toString());

         FBInstant.player
             .getDataAsync(['coins'])
             .then(function(data) {
                 console.log(2+player._coinsVal.toString());
                 player._coinsVal = 2;
                 setPlayerData(data);
                 console.log(3+player._coinsVal.toString());
         });
         console.log(4+player._coinsVal.toString());
         this.coinsVal = this.add.text(70, 150, '', styleCoinsStars);
    }

};

function setPlayerData(data){
  console.log('FooBar');
  console.log(data);
}

//Console.log Messages and comments:

10 //console.log(1+player._coinsVal.toString());
40 //console.log(4+player._coinsVal.toString());
20 //console.log(2+player._coinsVal.toString());
FooBar //setPlayerData(data);
{coins: 0} //setPlayerData(data);
32 //console.log(3+player._coinsVal.toString());

Until here everything is like is expected no problem

 

But when I introduce this.vars or this.funcs() the script is blocked here is an example:

---------Menu.js--------

var player = {_coinsVal: 0};

class Menu extends Phaser.Scene {
     constructor () {
        super('Menu');
     }
   
     create () {
         console.log(1+player._coinsVal.toString());

         FBInstant.player
             .getDataAsync(['coins'])
             .then(function(data) {
                 console.log(2+player._coinsVal.toString());
                 player._coinsVal = 2;

                 this.coinsVal.setText('1203');
                 
                 //OR
                 //this.coinsVal.setText(player._coinsVal.toString());
                 //OR EVEN
                 //this.setPlayerData(data); //When setPlayerData is declared inside the class.

                 setPlayerData(data);
                 console.log(3+player._coinsVal.toString());
         });
         console.log(4+player._coinsVal.toString());
         this.coinsVal = this.add.text(70, 150, '', styleCoinsStars);
    }

};

function setPlayerData(data){
  console.log('FooBar');
  console.log(data);
}

 

//Console.log Messages & Comments:

10 //console.log(1+player._coinsVal.toString());
40 //console.log(4+player._coinsVal.toString());
20 //console.log(2+player._coinsVal.toString());

Here we can see that after the line this.coinsVal.setText('1203'); everything is blocked and don't executed my first impression was is that this. is not the same within FBInstant.player.getDataAsync(['coins']).then but when I log it I found that is WIndow Object.

 

The script did not show any error or warning even if I write a wrong function like this.coinsVal.seext('1203');  it don't show any error on that also.

 

I'm completely against the wall.

 

Thank you for helping me.

[abdel]

Hy and thank you I solved the issue with .bind();

I saw it from http://www.html5gamedevs.com/topic/38042-leaderboard-no-open/?tab=comments#comment-217099

And so for my case there is the code:

FBInstant.player
      .getDataAsync(['coins'])
      .then(this.setPlayerData.bind(this));

and within my class:

setPlayerData(data){
    this.coinsVal.setText(data.coins.toString());
  }

and all works with magic.

I posted it for anyone encounter the same problem.

 

Thank You very much