Tonyeng Tonyeng - 1 year ago 164
TypeScript Question

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

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

I have a very simple example below which basically comes from the 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;

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

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

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

constructor(private navController: NavController) {

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


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


testPromise: any = function () {
var p1 = new Promise( resolve => {
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);
}, 5000);

// 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

// 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(;
//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 Source

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:'/cards/', this.newCard, this.creationSuccess); instead of passing this.creationSuccess try passing this.creationSuccess.bind(this)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download