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

Not receiving connections on localhost port 3000

Our team has successfully created a basic Express Node website https://i.stack.imgur.com/5fwmC.png We attempted to run the app using DEBUG=express_example:* npm start https://i.stack.imgur.com/NI5lR.png We also tried running it with node DEBUG=express_ ...

javascriptnode.jswindowsexpressnpm

Submitting form data including file uploads using AJAX

Currently, the file is being sent via AJAX using the following code: var fd = new FormData(); //additional actions to include files var xhr = new XMLHttpRequest(); xhr.open('POST', '/Upload/' + ID); xhr.send(fd); In ...

c#javascriptjqueryajaxasp.net-mvc

Is it possible to set up an automatic redirection to the Identity Provider sign-in page when accessing a protected page in Next.js using Auth.js?

Currently in the process of developing a web platform utilizing [email protected] and Auth.js([email protected]). The provider has been configured with the given code, allowing successful signing in using the "Sign in" button. auth.ts import Ne ...

javascripttypescriptnext.jsnext-auth

An issue arises in VueJS when employing brackets and the replace function in Typescript

My journey with the Typescript language has just begun, and I am excited to dive deeper into it. Currently, I am working on a SPA-Wordpress project as a hobby using Vite (VueJS). However, I am facing some challenges with the syntax when transitioning from ...

typescriptvue.jsbracketsdot-notation

Unexpected behavior with the ion-datetime time picker on an Android device

I am encountering challenges with a Date and Time entry feature in my Angular/Ionic application that involves date pickers. When I tap on the Time field, the time picker opens. Everything works perfectly in my browser - I can select a time, spin the value ...

androidangularionic-frameworkdatepicker

What is the best approach for creating a test that can simulate and manage errors during JSON parsing in a Node.js

My approach to testing involves retrieving JSON data from a file and parsing it in my test.js file. The code snippet below demonstrates how I achieve this: var data; before(function(done) { data = JSON.parse(fs.readFileSync(process.cwd() + '/p ...

javascriptnode.jsunit-testingmocha.jsassert

Preloading images before loading a div using JavaScript

Can you walk me through implementing object first and then mergeObject in JavaScript? I have an interesting scenario where I need to display the original list followed by a merged list after a short delay. How can I achieve this using JavaScript? Specific ...

javascriptarraysajaxhtmlobject

Result of a callback function

Having trouble returning a value for form validation using a callback function. It's not working for me... <form action="loggedin.php" onsubmit="return test(valid)" method="post"> function test(callback) { var k = ""; var httpRequest = ...

javascriptajax

Retrieving the value of a selected option in Angular

I have the following dropdown select in my HTML and I am currently retrieving the text content of the selected option. How can I access the value attribute instead? Here is the dropdown select: <form [formGroup]="angForm" class="form-inline my-5 my-l ...

angulartypescript

Printing from a lengthy React DOM using window.print only generates a single page

My React component is capable of rendering markdown and can span multiple pages. Everything looks great when the component is displayed in the browser - scrolling works perfectly. However, whenever I try to print the page using window.print or ctrl + P, ...

cssreactjstypescriptreact-dom

Can data be filtered based on type definitions using Runtime APIs and TypeDefs?

My theory: Is it feasible to generate a guard from TypeDefs that will be present at runtime? I recall hearing that this is achievable with TS4+. Essentially, two issues; one potentially resolvable: If your API (which you can't control) provides no ...

typescriptapitypesruntimelodash

Selenium unable to interact with Javascript pop-up box

I am currently working on automating a feature for our web application, specifically a form of @mentioning similar to Facebook. On the front end, when a user types @ into a text input, the API is called to retrieve the list of users and display them in a b ...

javascriptpython-3.xseleniumpython-behave

Sloped Divider on the Upper Edge of the Page

I'm currently in the process of developing a new website, and I'm looking to create a unique design for the main navigation bar on the homepage. Here is the ideal layout that I have in mind: https://i.stack.imgur.com/pc8z4.png While I understan ...

javascripthtmlcss

Enhance the background property in createMuiTheme of Material-UI by incorporating additional properties using Typescript

I've been attempting to include a new property within createMuiTheme, but Typescript is not allowing me to do so. I followed the instructions provided here: https://next.material-ui.com/guides/typescript/#customization-of-theme I created a .ts file ...

javascriptreactjstypescriptmaterial-uitypescript-typings

Angular material stepper displaying incorrectly

Here is the HTML code I used for creating an Angular Material stepper: <mat-horizontal-stepper class="stepper"> <mat-step label="Basic" state="cloud_download"> Step 1 <button mat-button matSteppe ...

angularangular-materialangular9

Guide on setting up a route in Next.js

Recently, I developed a simple feature that enables users to switch between languages on a webpage by adding the language code directly after the URL - i18n-next. Here's a snippet of how it functions: const [languages, ] = React.useState([{ langua ...

javascriptreactjstypescriptnext.js

I am encountering some difficulties with the functionality of the angularjs dialog

I've been attempting to integrate an AngularJS dialog feature into my application by following the examples provided on material.angularjs.org. However, despite copying everything accurately, I am unable to get it to function. Can anyone help identify ...

javascriptangularjsdialogangularjs-material

Which is better for handling events - jQuery delegation or function method?

Which approach is quicker and has broader browser support? 1. Utilizing a JavaScript function such as: function updateText(newtext) { $('div#id').text(newtext); } and incorporating it into an element's onclick event: <button onc ...

javascriptjqueryfunction

"Angular 4 is requesting a required get parameter that is currently missing

After running my code, I encountered the following console log error: "'Missing required 'page' parameter". I attempted to set this as a parameter in my get request, and it seemed successful because I was able to view the params as an array ...

angularhttptypescriptobservable

Monitoring data updates within an Angular directive

Is there a way to activate a $watch variable in an Angular directive when modifying the data within it (eg. adding or removing data), without assigning a completely new object to that variable? Currently, I am loading a basic dataset from a JSON file usin ...

javascriptangularjsangularjs-directive