Tips for dynamically loading JSON data in Pug and JavaScript by implementing scroll functionality

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 looking to showcase 12 data entries per page. As users scroll down, an additional 12 entries should load. I've been struggling to implement this functionality using pug. My attempts involved creating a function named 'loadData()' that interacts with the 'allBikeData' JSON and calling this function inside a loop. Can someone guide me on how to achieve this using pug?

javascriptjsonfor-loopscrollpug

Answer №1

The challenge here lies in the clash of two different principles - while pug excels at server-side page rendering, scroll-loading relies on AJAX to fetch content in chunks from the client side.

One approach is to utilize pug for structuring the base layout of the page, but you'll require an AJAX-enabled tool or plugin to manage the real-time loading as users scroll. You can have pug generate the overall framework that handles this functionality, and even render the segments of content being loaded dynamically. However, pug alone isn't equipped to handle the incremental loading process.

Ultimately, achieving what you're aiming for will necessitate incorporating another software component capable of supporting scroll-loading operations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to generate an HTML file without MathML by rendering MathJax/MathML at compilation/preprocessing time?

I am looking for a solution to convert webpages with heavy MathJax (or MathML) usage into ebooks for display on my Kindle, which does not fully support JavaScript or MathML. I am interested in preprocessing the .html files by running MathJax during a com ...

javascripthtmlcssmathjaxmathml

Prevent scrolling with absolute positioning

Here's a snippet of my HTML pseudocode: <div> <VideoAnimation /> <div className="under-animation"> // a lot of content goes here </div> </div> The issue arises from using absolute positioning on th ...

javascripthtmlcssreactjs

Is the current version of NPM React-router too cutting-edge for your needs

When I use the command npm -v react-router on my React app, it shows version 6.9.0. However, when I check the npmjs page for react-router, the latest version available is 5.0.1. How can this discrepancy be explained? ...

javascriptnpmreact-router

Disable functionality not functioning properly on button attribute

I've created a demo on JSFiddle here: http://jsfiddle.net/qJdaA/2/. The goal of this code is to disable the button with the ID #monitor if no checkboxes are checked. var checked = $('#status_table tr [id^="monitor_"]:checked'); if (checked. ...

javascriptjquery

Looking for guidance and bug assistance in HTML and JS, possibly involving PHP and MySQL. Can anyone offer advice?

I'm attempting to create an auto-complete feature for a forum (similar to the tags below) that will function within LimeSurvey. I am fairly new to this, so please provide explanations as if you were explaining it to a 5-year-old :) My objectives are: ...

phpjavascripthtmlmysql

The type 'void | Observable<User>' does not include the property 'subscribe'. Error code: ts(2339)

authenticate() { this.auth.authenticate(this.username, this.password).subscribe((_: any) => { this.router.navigateByUrl('dashboard', {replaceUrl: true}); }); } I'm puzzled by this error message, I've tried a few solu ...

javascriptangularobservablesubscribe

Transforming JSON keys in Angular

As a newcomer to angular and API integration, I am facing an issue with ngCharts in my project. The chart specifically requires the keys names in JSON to be "value" and "name", but the API I am using provides keys named "count" and "label". Is there a way ...

javascriptjsonangulartypescript

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

javascripthtmlcssonclickhtml-lists

Nesting / Mulled / JS - Uploading Files - Form's end is unexpectedly reached

I have successfully implemented the upload file functionality in my Nest.js server application, but I am facing an issue when trying to use it with JavaScript/React. @Post('upload') @UseInterceptors(FileInterceptor('file')) upl ...

javascriptnode.jsreactjsnestjsmulter

Using v-model in Vue 3 will result in modifications to the table class in Bootstrap 5

Below is a snippet of the code I wrote: <table class="table table-striped"> <tr class="table-dark"> <th>#</th> <th>Column 1</th> <th colspan="3">Column 2</th> </tr> <tr ...

javascripthtmlcssvuejs3bootstrap-5

Leveraging the push method within AngularJS

Hello, I am currently working on setting up an eCommerce shop using Angular. Below is the code snippet I am using: var shopApp = angular.module('shopApp', ["slugifier"], function() {}); controllers.productController = function($scope,FetchFa ...

javascriptangularjspushangularjs-ng-repeat

What is the best way to create a cube in Three.js with the 4 corner points of the base and a specified height?

Given a JSON with base coordinates, I am looking to generate a cube in Three.js. The height of the cube will be a constant value, such as 1. { "points": [ { "x": 0, ...

javascriptthree.js

Having trouble getting the Babel plugin transform-remove-console to function properly with the Vue CLI 4 and @vue/cli-plugin-babel/preset?

When you create a VueJS project using Vue CLI 4, Babel is configured with a useful preset in babel.config.js: module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], }; I am attempting to use babel-plugin-transform-remove-conso ...

javascriptvue.jswebpackbabeljsvue-cli

Restricting the length of dynamic dropdowns in a React application

Click here to view the code on CodeSandbox My dropdown menu options are dynamically generated and filtered based on custom data. const dropdownData = [ { code: "others", name: "Others", amenity: [] }, { code: "bed", name: "Bed", ...

javascriptreactjs

Sophisticated method for arranging three integers in javascript in descending order, followed by analyzing their relative distances

In developing an interactive infographic, I am working with three integers assigned to variables, each ranging from 0 to 50000. These numbers often have values that are close to each other, and I am looking for a way to identify when either 2, all 3, or no ...

javascriptjquerysortingcompare

Determine the dimensions of Expo's React Native Over the Air (OTA) update

Is there a method to determine the size of the required download for an OTA update before existing deployed apps (e.g. v1) retrieve it following the publication of a new managed Expo app (e.g. v2)? ...

javascriptiosreactjsreact-nativeexpo

Swap out images by clicking on a link with the corresponding number in the ID using jQuery

I have a list of links with unique IDs and a class named "load". What I want to do is change an image on the page based on the ID of the link that was clicked. I have prefixed all image IDs with 'folderid[number]'. Here's what I've tr ...

javascriptjqueryevents

What are the steps to integrate dynamic data into chartjs?

Can you assist me in understanding how to dynamically populate Chartjs with data from a json file? Specifically, I am looking to dynamically fill the labels and data fields. Sample JSON File <<< [ { "EFICAZ_TAB_ITEM_ID":1, " ...

javascriptjsonchartschart.js

Looping through an array and appending distinct elements to a fresh array

I am currently facing an issue and seeking feedback on how to resolve it. Below is the JSON data: questions: [ { question: 'lala', answer: 'papa', categories: ['Handla'] }, { question: ...

javascriptarraysecmascript-6

What is the best way to have NextJS add styles to the head in a production environment?

Typically, NextJS will include <style> tags directly in the head of your HTML document during development (potentially utilizing the style-loader internally). However, when running in production mode, NextJS will extract CSS chunks and serve them as ...

javascriptreactjswebpacknext.js