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

Navigating through a series of items in VueJS can be easily accomplished by using a

The creation of the Angular project was unsuccessful due to the outdated circular-json dependency

Unfolding the potential of variables in JSON.stringify with Node.js

In Internet Explorer 8, the PNG image is visible but in IE7, it myster

Incorporating a requirement into a function to ensure it is executed only under certain circumstances

Creating a Regular Expression that excludes all white spaces, including those at the start or end of the string

Conversation with form component in angular2

Looking to locate or track duplicate values within a multi-dimensional array?

The appearance of the check box remains stagnant visually

What is the best way to showcase images using Vue.js?

The ajax keypress event is malfunctioning and the ActionResult parameter is failing to capture any data

"ModuleNotFound" error occurred when attempting to utilize Netlify lambda functions with external dependencies

Tips for removing the current item from a list by clicking on a close icon of the same class name

What methods does Enzyme have for determining the visibility of components?

Conceal the rating of WordPress products when they have no ratings

Conceal the information beneath a see-through fixed navigation bar when scrolling downward

User-generated JSON Object with Date Information

Optimal method for identifying all inputs resembling text

Preserving objects/variables in non-volatile storage

CSS Dilemma: Font Refusing to Change