javascriptapipromisesapui5jsonmodel

Promise All Syntax and the Frame of accepatble Operations


The Function Promise.all - does have the job, to wait of asynchronious Functions and do certain logic after those asynchronious functions are done. I couldn't find how exactly does this function work i.e. if you can do certain things.

Example:

In this Code the Upperhalf till Promise.all, does fill the datelist with data. The Asynchronious function attachRequestCompleted - must first be done, so that datelist will be filled with data.

Within Promise.all i want to iterate through the datelist which was filled with data in attachRequestCompleted, so that i can later add them as Special Dates in the Calendar

var datelist = [];
var oModel = new sap.ui.model.json.JSONModel();

console.log(oModel.oData, datelist.length, datelist);

oModel.attachRequestCompleted(function() {
  var oFeiertageBerlin = oModel.getData().BE;
  for (var prop in oFeiertageBerlin) {
    datelist.push(oFeiertageBerlin[prop].datum);
  }
});

var jDatum = new Date();
var jLink = "https://feiertage-api.de/api/?jahr=" + jDatum.getFullYear();
oModel.loadData(jLink);

Promise.all([
  this.oModel.attachRequestCompleted
]).then(
  for (var j = 0; j < datelist.length; j++) {
    console.log(datelist[j]);

  }
)​

Expected Result: Possibility to iterate through the List

Actual Result: Syntax Error


Solution

  • As was indicated by the other comments, for the Promise function you would need to wrap the event callback in a Promise. However, your last comment lets me to believe that your root issue with the "this.byId" is that you'll need to bind the context for the callback. Hence:

    oModel.attachRequestCompleted(function() {
       // now this.byId(...) should work here
    }.bind(this));
    

    However, I would propose not using this setup and avoid the loadData function of the JSON model. The attaching of event handlers for completed / failed etc seems not be very elegant for me. I would rather go for jQuery.ajax() (https://api.jquery.com/jQuery.ajax/) or a manual XMLHttpRequest.

    With jQuery it would look like this:

    var oRequest = jQuery.ajax({
      url: jLink
    });
    oRequest.done(function() {
      // this.byId(...)
    }.bind(this));