I am trying to add an infinite scroll in to a div in reactive web app, the data is being fetched by an API, i have used data source to fetch the data and display it, the API is giving me 10 records per call.
What i want is to fetch next 10 records when my scroll ends, I am able to do that but the next 10 records are replacing my old records.
I have used the forge component End of Scroll Detection to detect end of scroll and trigger an event.
This is my logic for fetching the data from the api ( i have created the output variable of the datasource as list of GetPostResponse and appended the data to it
Thankyou,
Abhishek Dubey
Hey! Thanks for using my component!
I see u are appending the list to the variable in the dataaction. This indeed means the data will be refreshed. Instead U could use a local list on the screen. If you append the data to this list the data will be appended instead of replaced. Let me know if you need any more info!
Hey Brandon,
The Component is good, its helpful so thank you for that .Okay so I tried according to your suggestion i added a local list variable of type GetPostResponse and I have added an onAfterFetch on the GetPostApi where i am appending the output of the API to my local list variable, with some extra logic for date time.
And in my UI side i have displayed the expressions from the list but i am still not able to implement infinite scroll. This time i am not even getting the new data, maybe i am doing something wrong i am not able to figure out what
Hey Brandon, i wanted to say thankyou for your Solution, it worked. i did a silly mistake of using Append Action instead of AppendAll.
Its working now
Hey, Awesome to hear that it has worked! Good luck on your project!