Modified virtual list example isn't fully working

Questions
1

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++) {
items.push({
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.

2

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;
  requestToMongoData(...).then(()=>{
    self.items = ... new data
    // init Virtual List here with received items
  })
}