How to scroll and load more json data in pug and javascript?

Question

This is my pug file

        for specificBike in allBikeData        
          .bikeshop-card.border.border-dark.bg-white.m-3.p-4
            li
              img.shop-image.border.border-dark(src=specificBike.image, onerror="this.onerror=null; this.src='https://imgur.com/qzN3r1U.png'" alt="")
            li
              img(src=specificBike.logo, alt="")
            li
              a.text-dark(href=specificBike.website)
                h3.font-weight-bold=specificBike.shopname
            li
              h4=specificBike.contact
            li
              h4
                span.glyphicon.glyphicon-earphone 
                p=specificBike.phone
            li
              h4
                span.glyphicon.glyphicon-home
                p=specificBike.address
            li
              a.btn.btn-success(href=specificBike.facebook) Facebook
              a.btn.btn-success.ml-1(href=specificBike.instagram) Instagram

And This is my script:

  script.
    allBikeData = !{JSON.stringify(allBikeData)}

    const addMoreJson = (num) => {
        for(let i = 0; i < num; i++)
          loadData()
    }
    addMoreJson(12)

I'm trying to display 12 data per page, and as you scroll down, another 12 data load and so on. I'm having a problem figuring it out in pug, I've tried creating a function called loadData() for the allBikeData(which is where the json is being kept) and calling the funtion inside the for loop. How can I do this with pug?

Answer 1

The issue with this is that you're mixing two completely different paradigms - pug is used to render a page on the server, and scroll-loading uses AJAX which loads the page in pieces from the client.

You can use pug to render the framework of the page, but you'll need some form of AJAX-enabled plugin to do the dynamic loading as you scroll. You could use pug to render the "outer framework" that takes care of all this logic, and you can even use pug to render the pieces of the page you load as you scroll, but there's no way to make pug orchestrate the piecemeal loading.

So, effectively what you're asking for is not possible without another key piece of software to handle the scroll-loading.