Angular modules are designed to repeat chunks of code in a

Question

Angular modules are designed to repeat chunks of code in a

Whenever I scroll the page, my function pushes items to an array. However, I am facing an issue where the pushed items are repeating instead of adding new ones.

Solution Attempt

onScroll(): void {
      console.log('scrolled');
      var i,j,newArray,chunk = 10;
      for (i=0,j=this.listOfData.length; i<j; i+=chunk) {
          newArray = this.listOfData.slice(i,i+chunk);
          this.results = this.results.concat(newArray);
      }
}

The this.listOfData array contains 19 items but only shows 19 to 10 in a loop, repeating, while items from 9 to 1 never appear.

Original code source

Any suggestions on how to fix this issue?

Update

If it's unclear, I have created a short video demonstrating the problem Watch here

javascript angular typescript

Answer 1

Answer №1

Your code is not working properly because of the issue pointed out by Aditya in the preceding answer. You should make changes to your code as follows:

       handleScroll(): void {
          console.log('User has scrolled.');
          var index, newArray, chunkSize = 10;
          if (this.results.length == 0) {
              newArray = this.listOfData.slice(0, chunkSize);
              this.results = this.results.concat(newArray);
          } else if (this.results.length < this.listOfData.length) {
             index = this.results.length - 1;
             newArray = this.listOfData.slice(index, index + chunkSize);
             this.results = this.results.concat(newArray);
          }
       }

Answer 2

Your code is not working properly because of the issue pointed out by Aditya in the preceding answer. You should make changes to your code as follows:

       handleScroll(): void {
          console.log('User has scrolled.');
          var index, newArray, chunkSize = 10;
          if (this.results.length == 0) {
              newArray = this.listOfData.slice(0, chunkSize);
              this.results = this.results.concat(newArray);
          } else if (this.results.length < this.listOfData.length) {
             index = this.results.length - 1;
             newArray = this.listOfData.slice(index, index + chunkSize);
             this.results = this.results.concat(newArray);
          }
       }

Answer 3

Answer №2

Each time your function runs, the i value is reset to 0 and the chunk is always set to 10, resulting in the same chunk being sliced from the array repeatedly. This explains why you are experiencing duplicate data.

If you are confused about whether Array.prototype.slice modifies the original array, it actually does not make any changes to the original array.

To address this issue, consider modifying your code as follows:

onScroll(): void {
      console.log('scrolled');
      var i,j,newArray,chunk = 10;
      for (i=0,j=this.listOfData.length; i<j; i+=chunk) {
          newArray = this.listOfData.splice(i,i+chunk);
          this.results = this.results.concat(newArray);
      }
}

By using Array.prototype.splice, the specified chunk will be removed from the original array and returned as a separate chunk.

Answer 4

Each time your function runs, the i value is reset to 0 and the chunk is always set to 10, resulting in the same chunk being sliced from the array repeatedly. This explains why you are experiencing duplicate data.

If you are confused about whether Array.prototype.slice modifies the original array, it actually does not make any changes to the original array.

To address this issue, consider modifying your code as follows:

onScroll(): void {
      console.log('scrolled');
      var i,j,newArray,chunk = 10;
      for (i=0,j=this.listOfData.length; i<j; i+=chunk) {
          newArray = this.listOfData.splice(i,i+chunk);
          this.results = this.results.concat(newArray);
      }
}

By using Array.prototype.splice, the specified chunk will be removed from the original array and returned as a separate chunk.

Angular modules are designed to repeat chunks of code in a

Solution Attempt

Update

Answer №1

Answer №2

Similar questions

Demonstration of Concurrent Page Processing in Flask

The declaration file for module 'react/jsx-runtime' could not be located

The issue with AngularJS multiple $http requests failing to fetch accurate data

Ensuring a button (class) is in active hover mode when the document loads

The timer freezes briefly at 1:60 before switching to 1:01

Tips for concealing broken images in jQuery/JavaScript when generating dynamic content

The function document.getElementById(...) is failing to retrieve the text data from the table as expected

Do I have to cram all the content onto a single page just to use a scroll effect?

Dynamic content modal

dynamic image size based on mobile device orientation

``The presence of symlink leading to the existence of two different versions of React

Preventing Redundancy in Angular 2: Tips for Avoiding Duplicate Methods

Sharing parameters between functions in JavaScript

Struggling to deploy a basic node.js application to Heroku or connect it with MongoDB

Is it possible to retrieve HTML content using YQL?

Preserve component state in Angular 4 by saving it when navigating to a different component

Error: Undefined object property 'name' TypeError: Undefined object property 'name'

Scroll Bar Menu (User-Controlled)

Tips for preventing a span from disappearing when a hidden div is displayed during onmouseover

Ways to automatically include a local variable in all functions