Unusual encounters within arrays

Can anyone offer some assistance with this issue?

getPositionsPortfolioUpdated(){
    this.positionsWholeAccUpdated = [];
    this.positionsWholeAccUpdated = this.allPositionsFromAllAccs
    this.positionsWholeAccUpdated.forEach((pos, index) => {
        if (pos.ticker === this.ticker) {
            this.updatedPos = pos;
            this.updatedPos.direction = this.calculationData.position.updated.direction;
            this.updatedPos.size = this.calculationData.position.updated.quantity;
            this.updatedPos.value = this.calculationData.position.updated.value;
            this.positionsWholeAccUpdated.splice(index, 1)
            this.positionsWholeAccUpdated.push(this.updatedPos)
        }
    })
}

The main issue I'm facing is: When I perform the slice and push operations (

this.positionsWholeAccUpdated.push(this.updatedPos)
and
this.positionsWholeAccUpdated.splice(index, 1)
), it seems to be affecting this.allPositionsFromAllAccs as well for some unknown reason (modifying both arrays). What could be causing this? I made sure to create a new array so that I wouldn't impact this.allPositionsFromAllAccs in any way, as I need it to remain unchanged. Any insights on how to resolve this?

Edit: Issue resolved after using this workaround: this.positionsWholeAccUpdated = JSON.parse(JSON.stringify(this.allPositionsFromAllAccs));

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

Invalid action has been dispatched by the effect:

In my project, I am using Angular 7.1.4. This is an excerpt from my effect code: @Injectable() export class LoginEffects { constructor(private actions$: Actions, p ...

The export 'ChartObject' is not available in highcharts

Trying to integrate highcharts into my Angular 4 project has been a bit challenging as I keep encountering the following error: highcharts has no exported member 'ChartObject' I have experimented with different options such as angular-highchart ...

Learn how to calculate and showcase time discrepancies in minutes using Angular2

I am currently working on an Angular app that displays orders using the *ngFor directive. Each order has a datetime field indicating the date it was created. My goal is to implement a timer that shows how long a customer has been waiting for their order ...

I'm struggling with deleting a row from a pushed Object in Angular 2 and could use some guidance

Let me start by explaining my current issue: Initially, the problem was like this: , where it deleted the last created Object, Conditions in my case. However, I need to be able to delete each condition separately. For example, as shown with the red box n ...

Could you recursively transform one JSON-like type into another in typescript?

Exploring options for returning a generic type that encapsulates an array of something, the complexity of achieving this recursion is becoming apparent. With doubts arising, the feasibility of this task is being questioned. ...

Incorporating an external TypeScript script into JavaScript

If I have a TypeScript file named test.ts containing the code below: private method(){ //some operations } How can I access the "method" function within a JavaScript file? ...

What's the best way to streamline the code that sets up the list of validatees and validators in Angular's ReactiveFormsModule?

My form validation is currently based on ReactiveFormsModule, structured like this. Although I have multiple validators for each field, the process is quite repetitive. constructor(private builder: FormBuilder) { this.form = builder.group({ "firstNa ...

Elevate the scope analysis for a function within the Jasmine framework

I have written a few functions within the app component. I am experiencing an issue with increasing coverage in the summary for these component methods. The test cases are functioning correctly, but some lines are not being accounted for in the coverage s ...

Automatically update data in Angular without the need to refresh the page

One feature of my application involves displaying a table with rows retrieved from a database. The functionality responsible for fetching this data is an AJAX call, implemented as follows: getPosts(): Observable<Posts[]> { return this.http.post ...

Tips for inserting a hyperlink into a Chakra UI toast

Exploring the integration of Chakra UI within my Next.js project has led me to a curious question: Can Chakra UI toasts accommodate links and styled text? If so, what is the process for implementing these features? ...

Transferring TypeScript modules for browserifying

Recently, I transformed my canvas library from plain JavaScript to TypeScript. I have structured the code using classes, all of which are part of the cnvs module. However, I am facing difficulties in compiling these classes into a single file. My goal is ...

The structuredClone() function is unfortunately not supported in TypeScript

I am currently using node.js v17.2.0 and TypeScript v4.5.4. I have been attempting to utilize structuredClone() on a Map without success. Even though ES2021 is targeted in my tsconfig.json file and included in the lib, it appears that this function is not ...

The shift from es6 to commonJs in Angular modules has far-reaching implications

My attempt to incorporate FileSaver into my app led me to use the following command: import filesaver = require('filesaver'); However, this resulted in the error message: Import assignment cannot be used when targeting ECMAScript 2015 module ...

Cutting up the blob resulted in a lack of sound

I have been developing a small app that records user audio and transfers it to the back-end service using Angular. Currently, I have successfully created an app where users can record audio, send it, and even download the file to listen for testing purpos ...

The left-hand operator in Typescript is not valid

I am a beginner in typescript and I have been following a tutorial called Tour of Heroes on Angular's website. In the final chapter of the tutorial, when I tried to use HTTP with the provided code, everything seemed to run fine but I encountered an er ...

How to send form group in Angular when the enter key is pressed

When I press the submit button on a form, it sends a request to the database to filter data in a grid. However, I also want the form to submit when the enter key is pressed. HTML <form [formGroup]="bmForm" (keyup.enter)="onSearchClic ...

Embed map in a table with Angular 6

I am attempting to integrate a map into a table using Angular 6, but I do not have access to the "keyvalue" pipe. Below is the object I am working with... { "columns": ["col1", "col2", "col3"], "map":{ "obj 1":{ "obj aux":{ ...

Error alert: The return type is missing in the array.map method

After running ESLint on my TypeScript code, I received a warning that says: "Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)". The warning specifically points to the lambda function within the map function. privat ...

Select a single radio button containing values that can change dynamically

<input type="radio" on-click="checkDefaultLanguage" id="checkbox" > [[names(name)]] This custom radio input field contains dynamic values and I am attempting to create a functionality where only one radio button can be selected at a time while dese ...

What is the most straightforward way to make a property observable in terms of syntax?

There are countless tutorials out there demonstrating various ways to implement observables in Angular, but many of them are too complex for my needs. Some are outdated and no longer applicable. Let's assume I have a service with a single property ca ...