Just starting out in the world of web development. Any help is appreciated!
I'm attempting to showcase items stored in Firestore by utilizing paginate queries. The aim is for each time a user reaches the bottom of the page, we trigger a call to Firestore, fetch more items, and display them.
I've come across Infinite Scroll () and Isotope () as potentially useful tools, but have been struggling to implement them successfully.
Currently, my code looks like this:
var itemCollection = []
recipeRef.get().then(function(querySnapshot) {
var lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1]
querySnapshot.forEach(function(doc) {
itemCollection.push(doc.data());
})
return res.render('user', {...})})
I believe I need to create an event that retrieves more items from Firestore, adds them to the array, and displays them. However, I haven't found clear instructions on how to do this. Here's some sample code I discovered:
This example code appears to involve loading a preexisting page without querying a database, and then simply appending it as an object with Isotope. In my scenario, I'm working with an array and need to interact with Firestore, so I'm unsure about the approach. Any guidance would be greatly appreciated.
// Using Isotope & jQuery
// Initialize Isotope
var $grid = $('.grid').isotope({
// Isotope options...
itemSelector: '.grid__item',
});
// Get Isotope instance
var iso = $grid.data('isotope');
// Initialize Infinite Scroll
$grid.infiniteScroll({
// Infinite Scroll options...
append: '.grid__item',
outlayer: iso,
});