What could be the reason behind the variable remaining unchanged despite being modified?

I have a Pagination class that includes a method for local pagination.

export class Pagination {
public localPagination(type: IPaginationLocal): void {
        this.paginationType = type;
        this.fetchData();
    }

 public fetchData() {
    this.paginationType.data = this.paginationType.data.slice(this.from, this.to);    
 }

}

In action:

    this.plans = [1,2,3,4,5,6,7,8,9,10];
    this.pagination.localPagination({
       data: this.plans,
       type: modePagination.LOCAL
    });
   console.log(this.plans);// It must be sliced

By passing the variable this.plans to the

this.pagination.localPagination()
method,

The class slices the input data within the fetchData() method.

After pagination is executed, I check:

 console.log(this.plans);

Instead of returning the sliced array, it still returns the initial array this.plans.

Answer №1

You remain consistent

these.strategies

you adapt the parameter

this.paginationMethod.info

Answer №2

Make sure to return the updated value instead of altering the original reference.

export class Paginator {
public updateLocalPaginator(paging: IPaginationLocal): any {
        this.paginatorType = paging;
        this.loadPageData();
        return this.paginatorType.data;
    }

 public loadPageData() {
    this.paginatorType.data = this.paginatorType.data.slice(this.startIndex, this.endIndex);    
 }

}

Here's an example on how to use it:

this.items = [1,2,3,4,5,6,7,8,9,10];
    this.items = this.paginator.updateLocalPaginator({
       data: this.items,
       type: localPaginationMode.PAGINATE
    });
   console.log(this.items);// The data should now be sliced

Answer №3

Make sure you are printing the correct value, not the stored one:

console.log(this.pagination.paginationType.data);

When using Array.prototype.slice, keep in mind that it creates a new array without modifying the original one.

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

Typescript, bypassing the parameter's data type

I came across the following code snippet: const myObject = new Object(); myObject['test'] = 'hello'; calc(myObject['test']); function calc(x: number) { console.log(x * 10); } This example is quite straightforward. I exp ...

A guide to effectively utilizing spread props in React with Typescript and styled-components

As I develop a UI component for my application to ensure consistent styling, I require access to spread props for functionalities like value, onChange, and more. This is the current structure of my TextInput component: import { DetailedHTMLProps, InputHTM ...

Unable to locate module @angular/common/http (excluding SystemJs)

I am currently working with the visual studio 2017 template for my application. The visual studio 2017 project integrates Angular on the client side and ASP.NET Core MVC on the server side. I've run into an issue while trying to create an HTTP interce ...

Python's yield functionality facilitates the creation of lightweight generators, allowing

Request is being sent from the front end to trigger the backend method. In Python Flask, the backend method utilizes a generator and yield to iterate through a list of 100000 elements, sending each element one by one to the front end. The goal is for the b ...

React - Component continuously updates during form input

I am facing an issue where as I type in the login form modal, the entire component is re-rendering and causing me to only be able to type 1 or 2 letters before it resets. This is a problem that I have not encountered before. I attempted to factor out the ...

Using super() conditionally in Typescript

Is it possible to conditionally load the super class based on a parameter in TypeScript? I am facing an issue where I need to send a parameter in super() based on a specific condition, but placing an if statement before super() results in a compilation err ...

Discovering the type of a generic class in TypeScript

Class B extends a generic class A, and I am trying to infer the generic type of A that B is extending. The code snippet below demonstrates this. In earlier versions of TypeScript, this worked correctly for me. However, in my current project using version ...

Can you explain the concept of BuildOptions in Sequelize?

Despite poring through the sequelize documentation and conducting extensive searches online, I have yet to come across a satisfactory answer: Why is BuildOptions necessary and what impact does it have on the created model? import { Sequelize, Model, Data ...

Angular: No routes found that match the URL segment

I encountered an issue with my routes module where I am receiving the error message Cannot match any routes. URL Segment: 'edit-fighter' when attempting to navigate using the <a> link. The only route that seems to work is the champions-list ...

Error Message: "Module not found - Module TS2307 cannot be located

When I try to open a Typescript project in VSCode, I encounter the error message "ts2307 Cannot find module 'react' or its corresponding type declarations". However, everything works fine when I use WebStorm. The project was created using Create ...

I encountered difficulties connecting mongoose to my local MongoDB server

Hello Everyone! Currently, I am in the process of linking my node.js project to mongodb. Initially, everything worked smoothly when I used mongodb atlas. However, when I attempted to connect it using mongodb compass, I faced some issues and nothing seemed ...

Utilizing Consistent Styles Across Multiple Components within an Angular 2 Application

In my Angular 2 app, I have some CSS rules that are shared among multiple components. I don't want to duplicate these rules in each component's styles. Currently, I am considering two approaches: Storing common CSS rules in a static CSS file an ...

"I am having trouble calling the useStyles function in React with Typescript and Material-

There seems to be a problem with calling the useStyles function as it is throwing the following error message: This expression is not callable. Type 'never' has no call signatures.ts(2349) const useStyles: never Below is the complete code snip ...

Error Encountered in Kendo UI Angular: (SystemJS) HTML Syntax Error Detected

I am currently working on a project using VS2015 RC3, Angular2 2.0.0 within an ASP.NET Core solution hosted on IIS. When attempting to incorporate new UI modules like dropdowns or inputs, I keep encountering a SystemJS error. However, strangely enough, my ...

Tips for changing a "raw" DOM Event into a React SyntheticEvent

Currently, I am working with two separate libraries. The first library emits "raw" DOM events (lib.dom.d.ts), while the other library consumes React.SyntheticEvents. I am seeking advice on the most efficient method to transform the raw event into a Synthe ...

The process of switching from timestamp to date varies depending on whether you are working locally or on a server

Currently, I am in the process of developing an app using Firebase as the server and Flutter for the frontend. The situation I am facing is that when I upload a new document with a timestamp containing the current time in this format: "timestamp": DateTim ...

Understanding TypeScript: Utilizing type intersection and the powerful 'this' keyword

Can you explain the contrast between the following: interface MyType { f<T>(other: T): this & T; } versus interface MyType { f<T>(other: T): MyType & T; } ? Your insights would be highly appreciated! ...

Unexpected results observed in enumerators within typescript

Could someone clarify the results that I am seeing from the code below? enum days { sun = 1, mon = 0, tues }; console.log(days[1]); // outputs tues // should output -- mon console.log(days[0]); // outputs mon // should output -- sun Furthermore, how ...

What is the best way to transform a string into an array?

After receiving an object from the http response, it looks something like this: {"[3, company1]":["role_user"], "[4, company2]":["role_admin"] } The key in the object is represented as an array. Is there a method in ...

Unable to locate the necessary file. - Implementing TypeScript in a React application

Attempting to integrate TypeScript into an existing React app by following the steps outlined at: https://create-react-app.dev/docs/adding-typescript I've followed all the instructions but encountered the following error upon trying to launch the app ...