Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

Question

Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

I'm currently working on implementing AngularJS Infinite Scroll without using jQuery. My goal is to display the first 3 data items when the page loads and then load the next 3 data items from a JSON array object as the user scrolls. The issue I am facing is that while I can successfully load the initial 3 data items, when scrolling, it repeats loading the first 3 items instead of showing the next set. Additionally, I want the scroll functionality to show the next set of data when scrolling down and the previous set when scrolling up (similar to a pagination concept).

Below is the array used to parse the data in the controller:

var app = angular.module('Demo', []);

app.controller('VerticleDemo', function($scope) {

  $scope.items = [];
  $scope.Arr = [{
    "Select": "11",
    "PhotoCount": "12"
  }, {
    "Select": "21",
    "PhotoCount": "22"
  }, {
    "Select": "31",
    "PhotoCount": "32"
  }, {
    "Select": "1",
    "PhotoCount": "1"
  }, {
    "Select": "71",
    "PhotoCount": "72"
  }, {
    "Select": "441",
    "PhotoCount": "90"
  }, ];

  $scope.addItems = function() {
    for (var i = 0; i < 3; i++) {

      $scope.items.push($scope.Arr[i]);

    }
  };


  $scope.addItems();
});

    .scroll-loader {
      background: #f7f7f7;
      height: 90px;
      border: 3px solid #d2d2d2;
      margin-bottom: 20px;
      overflow: auto;
      padding: 10px 0;
      border-radius: .5rem 0 0 .5rem;
    }
    .scroll-loader li {
      list-style: none;
      border-bottom: 1px solid #aaa;
      padding: 5px;
      margin-bottom: 3px;
    }

I've been struggling with eliminating duplicate data and have tried various solutions without success. You can find my jsFiddle link below for reference: https://jsfiddle.net/sathishkti/96qhssfe/15/ Any help or guidance on resolving this issue would be greatly appreciated.

javascript css angularjs json

Answer 1

Answer №1

The issue lies within your addItems() function:

Your code is consistently adding items 0 to 3, but the desired behavior should involve creating an offset variable that allows you to skip over items that have already been displayed. You can increment this offset by a value of X every time your scroll event is triggered. To simplify things, I've stored the number 3 in a variable, but it's advisable to include this as part of the directive so that it can be easily adjusted in the HTML for greater flexibility.

var app = angular.module('myApp',[]);
app.controller('tstrll', function($scope) {

  $scope.items = [];
  $scope.Arr = [{
    "Select": "11",
    "PhotoCount": "12"
  }, {
    "Select": "21",
    "PhotoCount": "22"
  }, {
    "Select": "31",
    "PhotoCount": "32"
  }, {
    "Select": "1",
    "PhotoCount": "1"
  }, {
    "Select": "71",
    "PhotoCount": "72"
  }, {
    "Select": "441",
    "PhotoCount": "90"
  }];

  $scope.numberOfItems = 3;
  $scope.offSet = 0; //store the offset.
  $scope.addItems = function() {
    if ($scope.offSet <= $scope.Arr.length) //ensure it stops when there are no new elements.
    {
      //adjust the loop based on the offset to retrieve new values
      for (var i = $scope.offSet; i < $scope.offSet + $scope.numberOfItems; i++) {
        $scope.items.push($scope.Arr[i]);
      }
      $scope.offSet += $scope.numberOfItems; //increment the offset by 3.
    }
  };

  $scope.addItems();
});

app.directive('infiniteScroll', [ "$window", function ($window) {
    return {
        link:function (scope, element, attrs) {
            var offset = parseInt(attrs.threshold) || 0;
            var e = element[0];

            element.bind('scroll', function () {
                if (e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
                    scope.$apply(attrs.infiniteScroll);
                }
            });
        }
    };
}]);

View the demo here

Answer 2

The issue lies within your addItems() function:

Your code is consistently adding items 0 to 3, but the desired behavior should involve creating an offset variable that allows you to skip over items that have already been displayed. You can increment this offset by a value of X every time your scroll event is triggered. To simplify things, I've stored the number 3 in a variable, but it's advisable to include this as part of the directive so that it can be easily adjusted in the HTML for greater flexibility.

var app = angular.module('myApp',[]);
app.controller('tstrll', function($scope) {

  $scope.items = [];
  $scope.Arr = [{
    "Select": "11",
    "PhotoCount": "12"
  }, {
    "Select": "21",
    "PhotoCount": "22"
  }, {
    "Select": "31",
    "PhotoCount": "32"
  }, {
    "Select": "1",
    "PhotoCount": "1"
  }, {
    "Select": "71",
    "PhotoCount": "72"
  }, {
    "Select": "441",
    "PhotoCount": "90"
  }];

  $scope.numberOfItems = 3;
  $scope.offSet = 0; //store the offset.
  $scope.addItems = function() {
    if ($scope.offSet <= $scope.Arr.length) //ensure it stops when there are no new elements.
    {
      //adjust the loop based on the offset to retrieve new values
      for (var i = $scope.offSet; i < $scope.offSet + $scope.numberOfItems; i++) {
        $scope.items.push($scope.Arr[i]);
      }
      $scope.offSet += $scope.numberOfItems; //increment the offset by 3.
    }
  };

  $scope.addItems();
});

app.directive('infiniteScroll', [ "$window", function ($window) {
    return {
        link:function (scope, element, attrs) {
            var offset = parseInt(attrs.threshold) || 0;
            var e = element[0];

            element.bind('scroll', function () {
                if (e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
                    scope.$apply(attrs.infiniteScroll);
                }
            });
        }
    };
}]);

View the demo here

Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

Answer №1

Similar questions

Transferring Variables from WordPress PHP to JavaScript

Is it possible to have the cursor rotate or animate by 45 degrees when clicked

Ways to Press the Enter Key on Different Browsers

Issue with JQuery UI Tabs not displaying additional HTML pages in JavaScript

Clones are made sortable instead of arranging them in a specific order

Using Angular JS to dynamically load an HTML template from a directive upon clicking a button

Using CSS styles in emails can lead to an unexpected horizontal scrolling effect

Unable to properly test the functionality of the material-ui select component due to an error being thrown stating that the function is not being called

Adjust the GTK3 tooltip color exclusively for Eclipse when it is operating on Ubuntu

Issue with Angular variable not showing desired value

Manipulate Images Efficiently with jQuery

How can we convert milliseconds to the corresponding date and time zone in Java?

When you use map to transform the value, Observable will consistently return as undefined

Change the selection so that only the initial one appears in gray

Fixing the error: "React-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a valid function"

Developing User-Friendly Websites with Responsive Design

What is the correct way to utilize "data:" in a jQuery AJAX call?

Add a fresh item into an array in Json between existing elements

Is there a more efficient method for coding this switch/case in TypeScript?

Ways to position a single item in the middle of a multi-column layout