Mutiple Ajax calls from an ember component

1

I am very new to ember js 2.13. I have a component and have defined actions in them. How do I go about making multiple ajax calls based on differing payload. Any tips or samples will be appreciated.

for (var i = 0; i < emails.length; i++) {

//prepare Data var payload = { “data”: { “email”: “email1”,
} } payLoadList.push(payload); } payLoadList.forEach(function(object){ adapter.ajax(adapter.getFullUrl(“email”), ‘POST’, {data: object}); }

2

Hey @M.Shah, I don’t think anything is wrong with your syntax necessarily. Could you be more specific about exactly what you’re trying to do? Also what is ‘adapter’? Are you using Ember Data? If you are then instead of using ajax calls you can create ember data records and then “save” them which may accomplish the same thing.

The other thing you can do is, if you want to do something once all the ajax requests have finished, store the promises returned from the ‘ajax’ calls and use RSVP.all to wait until all of the requests complete:

var promises = [];
payLoadList.forEach(function(object){ 
  promises.push(adapter.ajax(adapter.getFullUrl("email"), 'POST', {data: object})); 
});
Ember.RSVP.all(promises).then(function(responses){
  // do some stuff once all the requests have succeeded
})
3

Hi, Here is the adapter code:

export default DS.JSONAPIAdapter.extend({ cordova: Ember.inject.service(), // Application specific overrides go here

headers: function () {
    let headers = {};
    headers["refId"] = uuid();
    if (!this.get('cordova').isInCordova) {
        if (config.APP.AUTHORIZATION !== undefined) {
            headers["Authorization"] = config.APP.AUTHORIZATION;
        }
    }
    headers["APP-CONTEXT"] = JSON.stringify(config.APP.HEADERS);
    return headers;
}.property().volatile(),

host: config.APP.HOST,
namespace: config.APP.NAMESPACE,

ajaxOptions: function(url, type, options) {
    let hash = this._super(url, type, options);
    hash.timeout = 60000;
    return hash;
},

getFullUrl: function(endPoint){
    return config.APP.HOST + "/" + config.APP.NAMESPACE + "/" + endPoint;
}

});

I modified the code in the component as follows:

var propertyPromises = ;

          payLoadsList.forEach(function(payloadValue) {
            propertyPromises.push(adapter.ajax(adapter.getFullUrl("email"), 'POST', {data: payloadValue}));
          });

          Ember.RSVP.all(propertyPromises).then(function(){
            self.get("validFields").clear();
            self.get("emails").clear();
            self.set('isFormValid', false);
            Ember.getOwner(self).lookup('router:main').transitionTo('/emailSent');
          });

It still does not make the ajax calls, it just transitions to /emailSent. Please let me know what am I doing wrong.

4

Hey @M.Shah, your component code looks good to me. I’ve never made AJAX requests via the adapter like that, I’ve done it more like the following which always worked pretty well:

let promise = Ember.$.ajax({
  headers: {
    "Accept": "application/json"
  },
  url: <url>,
  type: "POST",
  contentType: "application/json",
  dataType: "json",
  data: JSON.stringify(data);
  beforeSend: function (xhr) {
    var token = self.get('session.session.authenticated.access_token');
    if(token){
      xhr.setRequestHeader ("Authorization", "Bearer " + token);
    }
  }
});

Maybe you could try making raw jquery ajax requests like the one I put above and if that works try and figure out what’s going on in your adapter code.

5

Thanks a lot. We figured the issue. It works. The emails list was not populated/