Modified virtual list example isn't fully working

I’m trying to populate the virtual list from kitchen sync app with the data from the MongoDB, here is the modified code:

return {
data: function() {
var items = [];
mdb.collection(‘scoring_models’).find({}).sort({name:1}).execute().then(models => {
for (var i = 0; i < models.length; i++) {
title: models[i].name,
_id: models[i]._id,
}).catch(function(e){console.log(“Error fetching scoring models:”); console.log(e);});
return {
items: items

It works but initially list isn’t displaying any data. I have to engage the search function, remove the argument and only then the data appear.

I believe this is because I’m using JS promises while original code was simply generating data.

I appreciate if somebody give me advice how to rewrite this code correctly so the list start to display data when the page loads.

Yes, it is because your mongo request is async, so on the moment of return it is empty. Do the following:

  • return empty items ([]) in data
  • do the request to mongo and init list withing pageInit:
pageInit() {
  const self = this;
    self.items = ... new data
    // init Virtual List here with received items