How do I load more data for infinite scrolling table?

1

I’m trying to implement an infinite scroll table that displays user’s name, address and email. I created an API endpoint with fakerjs like this to serve on localhost:

var faker = require('faker')

function generateUsers () {
  var users = [];
  var loading = true;
  for(var i=0;i<50;i++) {
    var name = faker.name.findName()
    var email = faker.internet.email()
    var city = faker.address.city()
    var country = faker.address.country()
    users.push({
      "name": name,
      "email": email,
      "city": city,
      "country": country
    })
  }
  return { "users": users }
}
module.exports = generateUsers

My question is “How can I load another batch of 50 users every time I scroll to the end of the page?” On initial loading, it only loads in 50 users. I was thinking I could push more data into the user array in the ajax success function, but i’m confused of how to implement it.

$(document).ready(function(){
    var currentPageNumber = 1;
    loadMore(currentPageNumber);
$(window).scroll(function() {
    
    if($(window).scrollTop() ==  $(document).height()- $(window).height())
    {
        
        loadMore(currentPageNumber);
        currentPageNumber +=1;
    }
  });
    function loadMore(currentPage){
        $.ajax({
            method: "GET",
            url: "http://localhost:3000/users?_page="+ currentPage,
            dataType: 'json',
            success: function(data) {
                var  last = data[data.length-1];
                    for(var i=0;i<data.length;i++) {
                    
                       $('tbody').append("<tr><td>"+ data[i].name+"</td><td>"+ 
                       data[i].email+"</td><td>" 
                       + data[i].city + "," + data[i].country+ "</td></tr>")
                      
                     var arr = [];
                       $('tbody tr:first-child td').each(function(index){
                           arr.push($(this).width())
                       });
           
                       for(var j = 0; j<arr.length;j++){
                           $('thead th').eq(j).width(arr[j])
                       }
                    }; 
        
                    
            },
            error: function(data) {
                    console.log("Something went wrong!");
            }
            
    })
}

})
2

What are you getting in the console (when the ajax trigger should fire, i.e. 100% scroll limit) ?

You seem to be using a pretty standard function to init the ajax call on scroll, so first question would be is it your ajax call itself that is failing (and if so, why), or something in the way you’ve structured the addition of content. You’ve of course only provided the JS here.

I would just start with a console.log dump of ‘data’ in the success function. If nothing shows up at least you know which one it is-- Am I not initializing the ajax call properly, or not parsing it properly.

3

I think my ajax call only worked once, meaning when it finished loading 50 data points in the faker-generated JSON file, it stopped loading more as I scrolled to the end of the page.

4

Try my suggestion of just doing the console.log dump of ‘data’ in the success function. I looked it up but am not familiar with faker myself.

If console.log of ‘data’ produces no output then the ajax call is structured incorrectly. If it does indeed provide some additional entries maybe you are just not parsing them the right way.

When lost, break the problem into its simplest parts.

5

I tried that. It returned an array of 50 data points

6

If the data points returned are different then your first fifty then you know you have to focus on the way you are trying to either read through/add the data to your DOM.

Again, as mentioned I’m not familiar myself with faker or its JSON structure, but if you are getting fed new data, maybe just try adding a single additional entry, even with a single value.

You can also console.log that value first to ensure you aren’t also having some unexpected JQuery issue.