Getting Value for an Asynchronous Function, done in SAPUI5

Question

The variable datelist is supposed to be an array with lots of items.
Items will be pushed one by one into the list within the oModel.attachRequestComplete() function.

The console.log(datelist) in the following example gives out the list with all the necessary items (10 Items).
However, the datelist.length property is 0.

How can an array contain 10 elements but its length be 0?

Expected Results:

datelist should contain all the items
datelist.length should be > 0

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

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


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

// Why is datelist.length == 0 here?
console.log(datelist, datelist.length);

Turtlefight · Accepted Answer · 2019-08-09T13:59:21.960

The oModel.loadData will asynchronously request data.
The callback you passed to attachRequestCompleted will be called once the request has finished (execution will not block at loadData() until the data is available)

when your console.log(datelist, datelist.length); line runs, datelist will still be an empty array.
The reason you can see the items in the array in your browser console is that the request already completed when you inspected it. You can try the following in your browser console:

var arr = [];
console.log(arr, arr.length); // [], 0
arr.push(1); arr.push(2); arr.push(3);
// console.log(arr, arr.length); // [1,2,3], 3

The first log will output the array and when you inspect it the items will be there - they just weren't there yet when you accessed .length.

To fix this you could keep datelist inside the request completed handler:

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

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

  console.log(datelist, datelist.length);
  // do something with the datelist here
});


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

With sapui you can return the array as a json model, to which you can then bind in your views:

function loadHolidays() {
  var result = new sap.ui.model.json.JSONModel({datelist: []});
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.attachRequestCompleted(function() {
    var oFeiertageBerlin = oModel.getData().BE;
    var datelist = [];
    for (var prop in oFeiertageBerlin) {
      datelist.push(oFeiertageBerlin[prop].datum);
    }
    result.setData({datelist: datelist});
  });

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

  return result;
}

var model = loadHolidays();
// attach model to view
// e.g. sap.ui.getCore().setModel(model);

Plunker Example with the dates displayed in a table: Plunker Holiday Example

I would love to do something with datelist outside attachRequestCompleted, how do i make it happen? — Roman11222, Aug 09 '19 at 12:52
@Roman11222 you can have `datelist` declared outside of the `attachRequestCompleted` callback, however it will be empty until the callback you passed to `attachRequestCompleted` has run. What do you need to do with it? — Turtlefight, Aug 09 '19 at 12:59
Datelist contains all the holidays of Berlin, and i will be adding those as specialDates in the Calendar — Roman11222, Aug 09 '19 at 13:03
@Roman11222 you can use a separate JSONModel and then call `setData` on it once you generated the datelist. then you can bind this model to your view to use the datelist. (i updated answer with a new example) — Turtlefight, Aug 09 '19 at 13:19
Thank you for your Answer. I reproduced your example also binded the mode with sap.ui.getCore() -> the model.oData() contains datelist with 0 items. What is the Problem? — Roman11222, Aug 09 '19 at 13:32
@Roman11222 [heres an example](https://embed.plnkr.co/cMmuWU5xg5LLv0rj9w4C/) of how you could use it — Turtlefight, Aug 09 '19 at 13:57
Thank you for your example, however i dont really need it for the View, i just need the Dates that are inside datelist, so that i can use them as specialDates for the Calendar as Holidays — Roman11222, Aug 09 '19 at 14:18

Getting Value for an Asynchronous Function, done in SAPUI5

1 Answers1