When a property is removed from a variable in an Angular Component, it can impact another variable

During the iteration of the results property, I am assigning its value to another property called moreResults. After this assignment, I proceed to remove array elements from the testDetails within the moreResults property. However, it seems that the removal of these elements affects not only the moreResults property but also the original results property.

 ngOnInit(): void {
    for (let i = 0; i < this.results.length; i++) {
      this.moreResults.push(this.results[i]);
      this.moreResults[i].testDetails = [];
    }
    console.log(this.moreResults);
    console.log(this.results);
  }

Check out the code here

Answer №1

In your code, `moreResults` is simply a copy of `results`, but it's important to remember to clone the data instead.

ngOnInit(): void {
  this.moreResults = this.results.map((r:any) => {
  const m = {...r};
    m.testDetails = []
    return m;
  })
  console.log(this.moreResults);
  console.log(this.results);
}

For more information, please refer to

Answer №3

Absolutely!

this.data stores individual objects. When you execute

this.moreData.push(this.data[i]);
, you are including one of these object instances in this.moreData. However, keep in mind that only the reference to the object instance is added, not a copy. Therefore, any changes made to this.moreData[i].details = []; or this.data[i].details = []; will affect the original object instance as well.

If you want to duplicate the object instance, use

this.moreData.push({...this.data[i]});
.

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

Is there a more efficient method for coding this switch/case in TypeScript?

I'm working on a basic weather application using Angular and I wanted some advice on selecting the appropriate image based on different weather conditions. Do you have any suggestions on improving this process? enum WeatherCodition { Thunderstorm ...

Determine the generic parameter of the output type by analyzing the resolved value of a data type within the function

I am looking to automatically determine the generic parameter of the return type by utilizing the resolved value of a type within the function. Consider the following: export type Context = any; export type Handler<T> = (ctx: Context) => Promise& ...

Webpack is having trouble identifying Node's process module

It has been more than ten years since I last worked with JavaScript, but recently I had an idea for an app that would be best implemented as a NodeJS app. As I delved into the modern JS ecosystem, like many others, I found myself thoroughly confused, haha. ...

When attempting to run npm install for @types/jquery, an error is returned stating "Invalid name: @types/jquery"

npm install @types/jquery npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-c ...

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

There seems to be a missing @NgModule and @Directive declarations in an NPM module, even though they exist in the source code on Github. This is causing an issue with importing a directive for databinding from an HTML attribute. I am attempting to utilize ...

Ways to show an object by comparing its object ID to the ID received from the server

I have a collection of objects structured as follows: defined in FruitModel.ts export interface ColorByFruit{ Id : number; name : string; color : string; } const Fruits: ColorByFruit[] = [ {Id:1, name:"Apple", color:&quo ...

The PWA application is experiencing crashes on Safari following the recent IOS 17 update

Recently, I encountered an issue with my Angular app functioning as a PWA on my iPhone. Everything was working smoothly until the latest iOS 17 update. Now, the app crashes frequently and even when I clear the cache on Safari, it only works for a few min ...

Having trouble converting from JavaScript to TypeScript, encountered an error in the process

Seeking assistance with transitioning JavaScript code to TypeScript. const profiles = [{ name: "kamal", age: "20", designation: "developer", grade: "A", }, { name: "arun", age: "25", designation: "developer", grade: ...

Creating a customized Axios instance in Typescript can provide more flexibility and control over

I am looking to create an API with a customizable instance using Axios. Ideally, I want to be able to use a basic instance like this: api.get("url")... In addition, I would like to have the flexibility to add dynamic bodies and access them using something ...

Error: "the cart variable in the ctx object has not been defined"

A project I'm currently working on involves a pizza ordering app, and my current focus is on implementing the Cart feature. Each user has their own cart, which includes specific details outlined in cart.ts import { CartItem } from './cartitem&a ...

NPM IP library susceptible to Server-Side Request Forgery (SSRF) vulnerabilities

Received Security Alert from GitHub's Dependabot Regarding an Issue in My Angular Repository A security vulnerability has been identified in all versions of the NPM package "ip," allowing a malicious actor to execute arbitrary code and access sensiti ...

Unable to start Angular application, encountering errors while running ng serve

The challenge at hand As I delve into a new project, I've successfully cloned the repository onto my local machine. After utilizing npm install to fetch the necessary packages, running ng serve triggers a series of errors. Despite the application fai ...

What could be causing the issue with my customized sorting in the Material-UI Data Grid component?

After integrating Material-UI's Data Grid Component with my API's JSON array, I had to create a RenderCell function to handle text overflow and include a button that directs Users to a different page. Additionally, I utilized the ValueGetter for ...

Encountering a 'No overload matches this call.' error when using ApexCharts with Typescript and ReactJS

As a newcomer to Typescript, I am gradually familiarizing myself with this powerful tool. After fetching the OHLCV data from coinpaprika and passing it to ApexCharts, I encountered an issue while trying to map the raw data: ERROR in src/routes/Chart.tsx:3 ...

Changing a date format in typescript: Here is how you can easily convert a date from one

Using React with Typescript: I am currently working with a date picker from material-ui version 5. The date picker requires the date value to be in the format "yyyy-MM-dd". However, the API returns a Date object in the format "2022-01-12T00:00:00.000+00:0 ...

What is the abbreviation for indicating a return type as nullable?

Is there a way to use shorthand for nullable return types in TypeScript similar to using "name?: type" for parameters? function veryUsefulFunction(val?: string /* this is OK */) // but not this or other things I've tried. // is there a way a ...

What is the best way to convert a recordset to an array using React?

I'm attempting to create an array by retrieving data from a SQL recordset: +------------+------------+------------+ | start_type | field_name | start_text | +------------+------------+------------+ | 0 | Field1 | some text. | +----------- ...

Leverage the power of Firebase Firestore by seamlessly integrating full-text search capabilities with external services while also

While I understand that using external services like Algolia and Elasticsearch is necessary for full-text queries in Firestore, my struggle lies in integrating these tools with Firestore's existing querying options such as "where," "limit," and "start ...

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

My table is populated with dynamic rows of input boxes, some of which may have a default value while others return an empty string ''. This causes the table to collapse on those inputs. <tr *ngFor="let d of displayData"> < ...

transform JSON structure into an array

Is it possible to convert an interface class and JSON file into a list or array in order to work on it? For example, extracting the Racename from each object in the JSON file and storing it in a list/array. Here is the interface structure: interface IRunn ...