Can't get Promise to work with Trello in Ionic2 typescript

Question

Problem is that I want to ensure data is available before I proceed through my program, so I need to use async type function. Promise seems to be standard method as per ionic.io.

I have a very simple example below which basically comes from the Trello.com website to make a card. I then load the id into a global array and then attempt to log it.

//Start of myTry.ts

import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
//compile needs this and it seems to make the Trello functions work
declare var Trello: any;

@Component({
    templateUrl: 'build/pages/mytry/mytry.html'
})
export class MyTryPage {
    fileEntry: any;
    myData: any;    
    myList: any = "MyList ID - get this from the sandbox screen in Trello.com please";

    newCard = {     
        name: '****My New Test Card', 
        desc: '****This is the description of our new card.',
        idList: this.myList,
        pos: 'top'
    };

    readTrello: any = function() {
        Trello.post('/cards/', this.newCard, this.creationSuccess);
    }

    constructor(private navController: NavController) {

        Trello.authorize({
            type: "redirect",
            interactive: "true",
            name: "My Application",
            scope: {
                read: "true",
                write: "true" },
            expiration: "never",
            success: this.authenticationSuccess,
            error: this.authenticationFailure
        });

        this.testPromise();

        // this line does not work
        console.log('My data ' + this.myData); // returns undefined

     }

    testPromise: any = function () {    
        var p1 = new Promise( resolve => {
            this.readTrello();
            window.setTimeout( () => {
                // this line is run after timeout completes so why is data not available
                console.log("Since this is run after timeout, I expect data to exist???? "+ this.myData);
                resolve(0);
            }, 5000);
        });

        p1.then(
            // Log the fulfillment value
            () => {
                    //This fails - data is NOT available
                    console.log('Promise fullfilled. Data should be available:???? Array is no longer in scope at all????' + this.myData);

                    // I will load into displayable structure here later

                })
        .catch(
            // Log the rejection reason
            function(reason) {
                console.log('Handle rejected promise ('+reason+') here.');
            });
    }



    authenticationSuccess: any = function() {
        //This works
        console.log("Successful authentication"); 
    };
    authenticationFailure: any = function() {
        console.log("Failed authentication");
    };

    creationSuccess: any = function(data) {
        //This works
        console.log('Trello callback successfull');
        this.myData = JSON.stringify(data.id);
        //This works and the data returned is available and correct - great.
        console.log('Card created successfully. Data returned:' + this.myData);
    };

}

I am missing something - data is available before timeout but not after ??? Obviously my program flow is incorrect. ps I can do above using tokens but I want to use the Trello published APIs.

Answer 1

You have to use lambda functions if you want the this keyword to be defined as you're using it inside that function body.

Instead of window.setTimeout( function() { use window.setTimeout(() => {

Do the same thing for the p1.then line.

Also, in this line: Trello.post('/cards/', this.newCard, this.creationSuccess); instead of passing this.creationSuccess try passing this.creationSuccess.bind(this)