Attempting to showcase segments of an array one by one

Question

Attempting to showcase segments of an array one by one

Currently, I am showcasing the contents of an array on a view using $scope.array.

The array's content is loaded through a request to my server. However, exhibiting every element at once in the view is taking too long because $scope.array has a large number of elements.

To improve the user experience, I want to display the array part by part. Initially, I thought that simply adding data chunk by chunk to $scope.array would work, but it did not.

I realized that the current $digest loop would only complete when my array was full. I attempted using the Async library to add chunks asynchronously to $scope in hopes of bypassing the $digest issue, but it was unsuccessful.

Now, I am struggling to find a solution for properly displaying the data. If you have any insights or experiences with similar issues, I would greatly appreciate hearing about them!

Thank you very much.

javascript angularjs

Answer 1

Answer №1

If you want to avoid pagination and periodic requests, consider organizing all your data in one array that is not directly linked to the user interface. Then, periodically transfer chunks of this data into a second array that is connected to the UI. This approach allows for smoother $digest cycles and page rendering.

Here's a simple example:

<table>
  <tr ng-repeat="item in shownItems track by $index">
    <td>{{item}}</td>
  </tr>
</table>

In the controller:

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  // Array bound to UI
  $scope.shownItems = [];
  // Backing data
  var fullItemsList = [];
  // Generating fake data (replace with actual server fetch)
  for(var ii = 0; ii < 50000; ii++){
    fullItemsList.push("AYYYLMAO "  + ii);
  }

  // Chunk size for transferring items
  var chunkSize = 500;
  var currentChunkIndex = 0;

  // Transfer chunk of items to UI-bound array 
  function addMoreItems(){
    var start = currentChunkIndex * chunkSize;
    var end = (currentChunkIndex + 1) * chunkSize;
    for(var ii = start; ii < end; ii++){
      if(!fullItemsList[ii]){
        break;
      }
      $scope.shownItems.push(fullItemsList[ii]);
    }
    currentChunkIndex++;
  }

  // Periodic addition of items using timeouts
  function periodicAdd(){
    $timeout(function(){
      addMoreItems();
      if(currentChunkIndex*chunkSize >= $scope.shownItems.length){
        periodicAdd();
      }
    }, 0);
  }
  
  // Add initial chunk immediately
  addMoreItems();
  // Start periodic adding
  periodicAdd();
}]);

Click here for an example on Plunker

Please note that this example is basic. The initial load of 50k rows runs on the UI thread, which may differ from an asynchronous data fetch from a server. Ensure to initiate the periodic adding only after data retrieval completes. Adjust the timeout duration to maintain app performance. Remember to handle timeouts properly.

Answer 2

If you want to avoid pagination and periodic requests, consider organizing all your data in one array that is not directly linked to the user interface. Then, periodically transfer chunks of this data into a second array that is connected to the UI. This approach allows for smoother $digest cycles and page rendering.

Here's a simple example:

<table>
  <tr ng-repeat="item in shownItems track by $index">
    <td>{{item}}</td>
  </tr>
</table>

In the controller:

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  // Array bound to UI
  $scope.shownItems = [];
  // Backing data
  var fullItemsList = [];
  // Generating fake data (replace with actual server fetch)
  for(var ii = 0; ii < 50000; ii++){
    fullItemsList.push("AYYYLMAO "  + ii);
  }

  // Chunk size for transferring items
  var chunkSize = 500;
  var currentChunkIndex = 0;

  // Transfer chunk of items to UI-bound array 
  function addMoreItems(){
    var start = currentChunkIndex * chunkSize;
    var end = (currentChunkIndex + 1) * chunkSize;
    for(var ii = start; ii < end; ii++){
      if(!fullItemsList[ii]){
        break;
      }
      $scope.shownItems.push(fullItemsList[ii]);
    }
    currentChunkIndex++;
  }

  // Periodic addition of items using timeouts
  function periodicAdd(){
    $timeout(function(){
      addMoreItems();
      if(currentChunkIndex*chunkSize >= $scope.shownItems.length){
        periodicAdd();
      }
    }, 0);
  }
  
  // Add initial chunk immediately
  addMoreItems();
  // Start periodic adding
  periodicAdd();
}]);

Click here for an example on Plunker

Please note that this example is basic. The initial load of 50k rows runs on the UI thread, which may differ from an asynchronous data fetch from a server. Ensure to initiate the periodic adding only after data retrieval completes. Adjust the timeout duration to maintain app performance. Remember to handle timeouts properly.

Answer 3

Answer №2

Consider implementing server-side pagination for better performance. Sometimes using one-time bindings may not be sufficient, especially when dealing with complex template logic that involves showing/hiding parts based on data properties and requires editing.

If you need to filter your array based on specific criteria (such as month and year), it's recommended to handle this on the backend and send the criteria to the server:

GET /my_data?year=2019&month=10&page=2

.

Answer 4

Consider implementing server-side pagination for better performance. Sometimes using one-time bindings may not be sufficient, especially when dealing with complex template logic that involves showing/hiding parts based on data properties and requires editing.

If you need to filter your array based on specific criteria (such as month and year), it's recommended to handle this on the backend and send the criteria to the server:

GET /my_data?year=2019&month=10&page=2

.

Attempting to showcase segments of an array one by one

Answer №1

Answer №2

Similar questions

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

Using JavaScript to escape a single quote within a property value of a JavaScript object

Redirecting in AngularJS using ui-router post login authentication

Unexpected lag causing delays in jQuery animations

collaborating with numerous JavaScripts

Exploring the application of Javascript in Java Selenium Webdriver

Display the translated text to the user while storing a different value in the database using AngularJS and Angular-Translate

Using Vue.js to iterate through a nested array from an object key

When using Express.js for file uploading, it is important to first verify that a file has been sent, set a maximum file size limit, and ensure

What is the purpose of requiring the explicit invocation of app.listen(port) to enable express-ws to function properly?

Attach a Material-UI Popper component to a customized edge label in a React Flow

$injector encountered a problem resolving the required dependency

When iterating through a loop, the final value in an array is often overlooked

using node.js to save query results as global variables

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

I am facing issues with running my project due to a gyp error. Can anyone provide guidance on resolving this problem?

Utilize SWR to retrieve data that corresponds to the chosen value from the dropdown menu

Guide to importing a JSON file?

Why does the <div> element still have an offset even though its width and height are set to 100px and padding, margin, and border are set to 0px?

Can a variable containing HTML code be iterated through with a loop?