One should refrain from loading the API in Angular when there is no data present, by utilizing the global.getData method

Check out this code snippet:

loadNextBatch() {
    console.log('scrolldown');

    this.pageIndex = this.pageIndex + 1;
    this.global.getData(`/conditions/latest?start=${this.pageIndex}&length=${this.pageSize}`)
      .pipe(take(1)).subscribe(res => {

        const newBatch = res['data'];
        if (newBatch.length === 0) {
          return false;
        }

        this.tempThermometer.next(this.tempThermometer.getValue().concat(newBatch));
        console.log(this.tempThermometer);
      });
}

I am aiming to achieve a functionality where the batch loading stops at start=8 if there is no data available from the API endpoint 

/conditions/latest?start=9&length=4
. I want it to only load subsequent batches when there is actual data present. When there is no data at start=9, the loading should not proceed to start=11, 12, etc.. It should stay at start=8.

The challenge lies in preventing the continuous scrolling down to load more batches beyond start=8 when there is no data at start=9. The ideal behavior would be for the loading to stop and wait until there is new data available at start=9 before proceeding further.

javascriptangulartypescript

Answer №1

Is it a smart move to define a global variable and place the API call inside an if condition? 

loadNextData = true;

fetchData() {
  console.log('scrolling down');

  this.pageIndex = this.pageIndex + 1;
  if (this.loadNextData) {
    this.global.getData(`/items/latest?start=${this.pageIndex}&size=${this.pageSize}`)
      .pipe(take(1)).subscribe(res => {

        const newData = res['data'];
        if (newData.length === 0) {
          this.loadNextData = false;
        } else {
          this.tempStorage.next(this.tempStorage.getValue().concat(newData));
          console.log(this.tempStorage);
        }
      });
  }
}

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

Issue with FlexSlider 2 and thumbnail slider: Previous and Next buttons not functioning for main image

I have encountered an issue while using FlexSlider 2 with the thumbnail slider. The problem is that the main image does not respond as expected. When I try to navigate using the next/prev buttons, it does not slide or fade to the next/prev image. Even cl ...

javascripthtmlcsscarouselflexslider

Utilizing a TinyMCE editor within a text area and implementing a posting form through ajax

I am currently using tinyMCE in my textareas and submitting my form through AJAX. However, I am facing an issue where the value in the textarea is not being recorded when I try to save it. This is my text area: <textarea class="form-control" name="cont ...

javascriptjqueryajaxlaraveltextarea

Running a server-side function on the client-side in Node.js

I am currently working with the following code snippet on the server: var game = io.listen(app); game.sockets.on('connection', function(socket){ storePlayers(socket.id); //Only the player who connects receives this message socket.em ...

javascriptnode.jssocket.ioclient

Error 404 when implementing routing in Angular 2 with Auth0

In my Angular 2 application, I am utilizing Auth0 authentication. While everything works fine on localhost, I encounter issues when running the application on the server (my domain). Based on what I know, my problem seems to be with the routes. Iss ...

angularauthenticationtypescriptauth0

Executing a function within a ng-repeat iteration

Is there a way to call a method within an ng-repeat loop, even if the element does not exist at that moment? I'm facing this issue and I'm not sure how to resolve it... The ID seems to be correct. Strangely, when I run it in the console after ev ...

javascripthtmlangularjs

Encountering "No provider for TemplateRef" error in Angular 15+ when using a structural directive as the

Since the release of Angular version 15, it is now possible to bind standalone directives to component and directive decorators. Is there a way to utilize structural directives (with injected TemplateRef) as a hostDirective? This feature would be extremely ...

angularangular15

HTML set hover & active states to remain active indefinitely

NOTE: My project utilizes Angular, so Angular may offer a solution to this issue as well I am in the process of creating a page where I can preview and test out various styles that I have designed. In order to achieve this, I need to somehow activate both ...

htmlcssangular

What is the method of utilizing shared services when the controllers do not rely on any shared services?

Let's imagine a scenario where there is a module containing only one factory, which serves as the shared service. angular.module('sharedService', []) .factory('sharedSrv', sharedService) function sharedService() { var numbe ...

javascriptangularjsangularjs-serviceangularjs-module

Guide on incorporating a texture file (.mtl) onto a model (.obj) with three.js

I've managed to successfully display a .obj file using three.js by adapting code I found online for my project. However, I'm now facing challenges when trying to incorporate the .mtl material file. Despite attempting various solutions, nothing s ...

javascriptobjectthree.jsmtl-file

How to use the route.navigate() method in Angular 9 to open a URL in a new tab with a query string

When a button is clicked within a table in our application, I have to open a new tab with details of a specific record from the table. Currently, the code I am using navigates to a new URL and uses resolvers to fetch data from the backend on the new page. ...

javascriptangularangular2-routing

Jest may come across test suites, but it discreetly disregards the individual tests

Having encountered an issue with Jest testing in a Nuxt/Vue v2 project, I found that after making some changes, the tests were no longer running. The unit tests were either passing or failing initially, but suddenly stopped running altogether. ----------|- ...

javascripttypescriptvuejs2jestjsnuxt.js

Strip excess white space from a complex string using Javascript

I have the following sets of strings: 14/04/22 10:45:20 12.08N 87.65W 15.0 2.9ML Frente a Corinto 14/04/21 11:05:34 12.10N 87.70W 140.0 3.5MC Cerca de Masachapa 14/04/22 09:00:09 12.35N 86.44W 12.4 1.3ML Cerca del volcan Momotombo 14/04/21 23:33:37 1 ...

javascriptregex

Make a JSONP request with the MIME Type set to text/plain

I've been attempting to utilize JSONP for fetching a feed from a different domain. Despite knowing that the content type should ideally be JSON or JavaScript, it is currently set as text/plain and unfortunately, I lack control over the server settings ...

javascriptjqueryajaxjson

Is there a method to refresh the entire DOM-based location without having to reload the browser window?

Is it possible to achieve smooth asynchronous page transitions without breaking existing JavaScript animations in a system like Webflow? I'm struggling to find a way to present new elements to the DOM without disrupting the animations that are already ...

javascriptajaxanimationdomwebflow

Angular 2: Testing Firebase Add Functionality with Unit Tests

Is there a way to perform a basic unit test in Angular 2 for testing a simple firebase adding item feature? I've opted for typescript over standard JavaScript in my code. This is the piece of code I want to test: export class AppComponent { r ...

javascriptunit-testingtypescriptfirebaseangular

Leveraging IF conditions on part of the worksheet title

Currently, my script is performing the task of hiding three columns for tabs in a workbook that start with "TRI". However, the execution speed is quite sluggish. I am seeking suggestions on how to optimize and enhance the performance. If possible, please p ...

arraysexceltypescriptperformanceoffice-scripts

Struggling to understand why I'm having trouble connecting my AJAX handler within WordPress

Following the instructions here as a guide seems to be leading me astray. After submitting the form below, a POST request to http://thesite/wp-admin/member-update results in a 404 error. I believed that this request should trigger my function member_update ...

javascriptphpjqueryajaxwordpress

What is the correct method for executing an API request within a div?

I am currently facing a challenge in displaying data in a table sourced from 2 different tables in my database, connected by foreign keys. To retrieve the list of stores, I use the following code snippet: useEffect(()=>{ axios.get("http://localhos ...

javascriptreactjsaxiosmaterial-ui

My JavaScript code is not triggering during the page load. Could this be related to .net

I've been attempting to trigger a JavaScript function upon the refresh of an update panel, but for some reason it's not working. Oddly enough, I'm using the same approach that has worked for other functions. In C#, this is what I have in th ...

javascript.net

Guide to sending client-to-client notifications in Angular/Ionic with Firebase Cloud Messaging

I am looking to implement client-client push notifications (not server-to-client). My goal is to send a notification when one user messages another. Is this feasible? How can I achieve this using the structure in the Firebase real-time database? Here is a ...

javascriptangularfirebaseionic-frameworkpush-notification