Firing asynchronous functions from services

Ionic Framework ionic-v3
1

Hello, I have defined a service global-data.js and I am trying to get

signup.js

import {FormBuilder, Validators} from 'angular2/common';
import {Page, NavController} from 'ionic/ionic';
import {PhoneVerificationIntroPage} from '../phone-verification-intro/phone-verification-intro';
import {LoginPage} from '../login/login';
import {IonicApp, Page, Modal, Alert, NavController} from 'ionic/ionic';
import {GlobalData} from '../../providers/global-data/global-data';

@Page({
  templateUrl: 'build/pages/signup/signup.html',
})
export class SignupPage {
  constructor(nav: NavController, form: FormBuilder, global: GlobalData) {
    var self = this;
    this.global = global;
    this.nav = nav;
    this.signupError = false;
    this.signupInProgress = false;
    this.signupBtnText = 'Kaydol';
    this.failedSignupCount = 0;
    this.formData = {
      name: '',
      surname: '',
      email: '',
      password: '',
      passwordCheck: ''
    }

    this.signupForm = form.group({
      name: ["", Validators.required],
      surname: ["", Validators.required],
      email: ["", Validators.required],
      password: ["", Validators.required],
      passwordCheck: ["", Validators.required]
    });

    this.retrySignup = function () {
      this.signupError = false;
      this.signupBtnText = 'Kaydol';
      this.signupInProgress = false;
    };
  }

  onSignup(event) {

    var a = this.global.checkMail(this.signupForm.controls.email.value);
    console.log(a);


  }
}

global-data.js

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';

@Injectable()
export class GlobalData {
  constructor(http: Http) {
    this.http = http;
    this.data = null;
    this.doesMailExist = null;
  }

  checkMail(mail) {
    var email = new Parse.Query(Parse.User);
    email.equalTo("email", mail);
    email.find({
      success: function (email) {
        if (email.length) {
          return true;
        } else {
          return false;
        }
      }
    });
  }

}

This onSignup function from signup.js returns undefined. It was working within the same .js file without problem, but I would like to keep the pages cleaner by keeping frequently used function in a global file. I think this has something to do with promises, however I couldn’t find any solution.

PS: Parse is working correctly, and I defined the global-data.js in my app.js file as a provider.

Now, any idea how to get this working?

Thanks.

3

I’ve only had a quick look and it’s late here so excuse any mistakes, but you might need to use a Promise instead, e.g:

  checkMail(mail){
    return new Promise((resolve, reject) => {

      var email = new Parse.Query(Parse.User);
      email.equalTo("email", mail);
      email.find({
        success: function (email) {
          if (email.length) {
            resolve(true);
          } else {
            resolve(false);
          }
        }
      });

    });    
  }

  onSignup(event) {

    this.global.checkMail(this.signupForm.controls.email.value).then((result) => {
      console.log(result);
    });

  }
2 Likes
4

Works like a charm, thanks a lot.

5

Seriously, I was smashing my head to the screens for a few days. I downloaded giflist by the way, good work. Thanks again.

1 Like
6

many thanks! I spent so much time trying to solve it myself!