We are currently facing an issue where the dynamic data from Mongo db is loading all at once instead of through scrolling. Our objective is to have the data load progressively as we scroll, all on one single page.
// We attempted using Lazy loading carousel, but unfortunately, it did not work as expected.
function loadStartUp(){
$.ajax({
url: '/createSection',
type: 'get',
dataType: 'json',
success: function (data) {
var i = 0;
data.forEach(function(model){
console.log(model)
$('#tbody').append(`
<tr>
<td>
<a href="#" class="tagModalWindow">${model.name}</a>
</td>
...
`)
navItem(model.name,i);
createSection(model.name, model.frequency, i,model.type,model.entity, model,model._id);
if(model.parameters.length > 0){
...
}
i++;
});
carousel();
}
});
function carousel(){
console.log("carousel");
...
});
}
This section fetches data from the database:
app.get('/createSection', isLoggedIn, (req, res, next)=>{
var query = {user:req.user._id};
dashModel.find(query,(err, data)=>{
if(err){
console.log(err)
}
console.log(data)
res.send(data)
})
});
I am relatively new to Express.Js and would appreciate any guidance on how to address this issue. Thank you in advance.