When using Angular 2, the array.splice() function is causing the elements to be removed from the

Question

When using Angular 2, the array.splice() function is causing the elements to be removed from the

I am currently working with an HTML table that has default checked rows.

<table>
    <tr>
        <th></th>
        <th>Id</th>
        <th>Name</th>
        <th>Initial</th>
    </tr>
    <tr *ngFor="let name of names; let i = index">
        <td><input type="checkbox" [checked]="chk" (change)="onTaChange(name, $event.target.checked,i)"></td>
        <td>{{name.id}}</td>
        <td>{{name.Fname}}</td>
        <td>{{name.Initial}}</td>
    </tr>
</table>

I have created another array to store unchecked/checked objects. In the onTaChange() method, I pass the index in splice() to remove the object at that index (unchecked row in the table). However, the rows(objects) are getting removed even if they belong to different arrays of objects.

My goal is to have a second array containing only the checked/unchecked rows of objects. Can anyone provide assistance with this?

Plunker

javascript angular typescript

Answer 1

Answer №1

Explanation: Arrays store references, which means that when you create the following:

alteredNames:string[]=this.names;

alteredNames is not a brand new array but rather a reference to the original array, so any changes made in either array will be reflected in both.

Resolution: To avoid this issue, make a deep copy of the array by using _.cloneDeep(this.name).

Answer 2

Explanation: Arrays store references, which means that when you create the following:

alteredNames:string[]=this.names;

alteredNames is not a brand new array but rather a reference to the original array, so any changes made in either array will be reflected in both.

Resolution: To avoid this issue, make a deep copy of the array by using _.cloneDeep(this.name).

Answer 3

Answer №2

When it comes to copying an array, there are various modern methods available:

loop
Array.from
Array.slice
Array.concat
JSON.parse(JSON.stringify(arr))
[...arr] from ES6

However, most of these methods do not create a new instance for the new array, with the exception of loop or Array.concat(). Therefore, in your situation, you will need to use either the loop method using Array.forEach and Array.push, or the Array.concat() method to copy the array.

Here is a helpful plunker for reference. I hope this information proves useful.

Answer 4

When it comes to copying an array, there are various modern methods available:

loop
Array.from
Array.slice
Array.concat
JSON.parse(JSON.stringify(arr))
[...arr] from ES6

However, most of these methods do not create a new instance for the new array, with the exception of loop or Array.concat(). Therefore, in your situation, you will need to use either the loop method using Array.forEach and Array.push, or the Array.concat() method to copy the array.

Here is a helpful plunker for reference. I hope this information proves useful.

Answer 5

Answer №3

When utilizing the same reference and passing the entire array to your OnTaChange method

The slice() method can be used to make a clone of the array object

this.alteredNames=this.names.slice(0);

Additionally, as Pankaj mentioned,

this.alteredNames=Object.assign([], this.names)

In addition to the above methods, a fantastic 3rd party library can also achieve similar results,

export class App {
  chk:boolean = true;
  names:string[] = [
    {
      "Fname": "Bunty",
      "id": "1",
      "Initial":"G"
    },
    {
      "Fname": "Ronny",
      "id": "2",
      "Initial":"K"
    },
    {
      "Fname": "Sam",
      "id": "3",
      "Initial":"P"
    },
    {
      "Fname": "James",
      "id": "4",
      "Initial":"M"
    }
    ];
    alteredNames:string[];
  constructor() {
   this.alteredNames=_.clone(this.names) //////////this works
   // or
   this.alteredNames=_.cloneDeep(this.names) // will also work. 
  }

  onTaChange(name:string, $event.target.checked:boolean,i:number){
    if(!checked){
      this.alteredNames.splice(i,1); 
      console.log(this.alteredNames);
    }
    else{
      this.alteredNames.push(name);
    }
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Lodash should be included from this CDN as shown below

Updated Plunker

Furthermore,

Answer 6

When utilizing the same reference and passing the entire array to your OnTaChange method

The slice() method can be used to make a clone of the array object

this.alteredNames=this.names.slice(0);

Additionally, as Pankaj mentioned,

this.alteredNames=Object.assign([], this.names)

In addition to the above methods, a fantastic 3rd party library can also achieve similar results,

export class App {
  chk:boolean = true;
  names:string[] = [
    {
      "Fname": "Bunty",
      "id": "1",
      "Initial":"G"
    },
    {
      "Fname": "Ronny",
      "id": "2",
      "Initial":"K"
    },
    {
      "Fname": "Sam",
      "id": "3",
      "Initial":"P"
    },
    {
      "Fname": "James",
      "id": "4",
      "Initial":"M"
    }
    ];
    alteredNames:string[];
  constructor() {
   this.alteredNames=_.clone(this.names) //////////this works
   // or
   this.alteredNames=_.cloneDeep(this.names) // will also work. 
  }

  onTaChange(name:string, $event.target.checked:boolean,i:number){
    if(!checked){
      this.alteredNames.splice(i,1); 
      console.log(this.alteredNames);
    }
    else{
      this.alteredNames.push(name);
    }
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Lodash should be included from this CDN as shown below

Updated Plunker

Furthermore,

When using Angular 2, the array.splice() function is causing the elements to be removed from the

Answer №1

Answer №2

Answer №3

Similar questions

Instructions on transferring an image to a server. The image is located on the client side within an <img> tag

How to target and set focus on dynamically generated input field when the ID is unknown

Can the garbage collector in Typescript/JavaScript effectively handle circular references, or does it result in memory leaks?

Utilizing AngularJS with dual controllers within a single view

Using JavaScript, you can manipulate the position of a line on a canvas to

Creating dynamic grids in React.js by utilizing HTML

Troubleshooting an Angular.js "Hello World" application that is malfunctioning

I can't quite understand the reasoning behind why this specific function is designed to output

Adding a modified (id) content inline template element to another element: A step-by-step guide

analyzing strings by comparing their characters to another string

Uploading files in Angular alongside other data within the same HTTP post request

Having trouble with Three JS shadows not displaying correctly?

Angular directive has issues with $compile functionality

Using the Coinbase.com API with HMAC authentication in a Node.js environment

Expanding external type declarations within Typescript

Looking to extract, interpret, and display PDF documents using React?

Guide on replacing placeholders in a text with input fields and connecting them with v-model in Vue.js

Nextjs Clerk: The <SignIn/> element lacks proper configuration

Encountered an unexpected error while attempting to integrate my custom npm library "MyModule" into my Angular 2 project

Tips for effectively managing loading state within redux toolkit crud operations