ember helper waiting for an ajax request

Question

i,ve write an ember component when init method they call ajax request

    init(){
    this._super(...arguments);
    const context = this;
    if ((this.get('localStorage').getItem('idProfileDesa')) !== null && (this.get('localStorage').getItem('idProfileDesa')) !== undefined) {
      if ((this.get('localStorage').getItem('idProfileDesa')) !== 0) {
        this.get('registerProfileDesaService').findByProfileFormId(this.get('localStorage').getItem('idProfileDesa')).then(
          function (response) {
            context.debug(JSON.stringify(response));
            context.set("alamat", response.alamat);
            context.set("kodeWilayah", response.kodeWilayah);
            context.set("noTelp", response.noTelepon);
            context.set("lokasiWilayah", response.lokasiWilayah);
            context.set("email", response.email);
            context.set("website", response.website);
            context.set("jumlahDusun", response.jumlahDusun);
            context.set("jumlahRw", response.jumlahRW);
            context.set("jumlahRt", response.jumlahRT);
            context.set("jumlahKepalaKeluarga", response.jumlahKepalaKeluarga);
            context.set("jumlahRumahTangga", response.jumlahRumahTangga);
            context.set("jumlahPenduduk", response.jumlahPenduduk);
            context.set("lokasiKantor", response.lokasiKantor);
            context.set("pos", response.pos);
          }, function (e) {
            context.debug(e);
            context.get('commonService').showNotification(e);
          });
      }
    }
  }

this is worked, but unfortunately my ember helper doesn't waiting for ajax request and said the 'data' is undefined in console log

    import Ember from 'ember';

export function validateIsEmail(params/*, hash*/) {
  let email = params[0];
  let mustHaveChar = ["@",".com",".co.id",".id",".org"];
  let didHasWord = 0;
  mustHaveChar.forEach(function (word) {
    didHasWord = didHasWord + email.includes(word);
  });

  return (didHasWord > 1);
}

export default Ember.Helper.helper(validateIsEmail);

how to make my ember helper waiting for an ajax request?

Answer 1

Kindly consider twice before loading data inside components. Components are meant to be isolated as much as possible. I understand, there are many cases in which we have to load data inside components. In your case, you can pass the data from the parent container (may be a controller) to the component by loading the data inside the container and passing the same to the component to render.

To answer your question, the helper will take charge as soon as it is invoked in the template and will not worry about the state of the component. So, try not to invoke the helper until the data is loaded completely.

In your component file,

  init() {
    this._super(...arguments);
    this.set('isLoading', true); // <- setting the loading state explicitly
    $.ajax('https://jsonplaceholder.typicode.com/users').then((data) => {
      this.set('users', data);
      this.set('isLoading', false); // <- make it false after the data loads
    });
  }

In your component's template,

{{#unless isLoading}} <!-- render the component only if the data finished loading -->
    {{#each users as |user|}}
    <li>{{user.name}} :
        {{#if (isemail user.email)}}
        {{user.email}}
    {{else}}
        <span style="color: red">(The email is invaild)</span>
    {{/if}}
    </li>
  {{/each}}
{{/unless}}

Refer to this twiddle for detailed invocation: https://ember-twiddle.com/53bd472bbeaa42d1790da2ba97a6a803?openFiles=templates.components.my-comp.hbs%2Ctemplates.components.my-comp.hbs