Angular cloned array gets changed automatically

Question

I want to have a filter based on active-states from available checkboxes.

First everything should gets displayed, after a filter is selected, in this case a selection of hero names should only display heroes which contains atleast the name.

The interesting part is that: If I try to change the value back to the "full"-object it is not taking the complete object but an altered version of that.

I do not know what is happening there. Because I only initialized the full-object in the constructor of the app. With full-object I mean fullHeroes.

App.Component.ts :

import { Component, OnInit } from '@angular/core';

interface Hero {
    name: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
  readonly fullHeroes: Hero[] = [];
  heroes: Hero[] = [];

  constructor() {
    this.heroes.push(
        { name: 'Bob' }, { name: 'Alice' }, { name: 'Mallory' }
    );
    this.fullHeroes = this.heroes.slice(0);
}

filter(name, checked) {
    if (checked) {
        for (let i = 0; i <= this.heroes.length; i++) {
            let found = false;
            const currentHero = this.heroes[i];
            if (currentHero && currentHero.name === name) {
                found = true;
            }
            if (found) {
                this.heroes.splice(i, 1);
            }
        }
    } else {
        this.heroes = [];
        this.heroes = this.fullHeroes;
    }
    return;
  }
}

App.component.html :

   <div class="container">
    <h1>World of Heroes</h1>
    <p>Filter your Heroes based on names!</p>

    <div class="filter">
      <form #heroForm="ngForm">

        <fieldset>
          <legend>Choose the names</legend>
          <div class="form-check" *ngFor="let hero of heroes">
            <label class="form-check-label">
                <input  class="form-check-input" type="checkbox" [name]="hero.name" (change)="filter($event.target.name, $event.target.checked)"> {{hero.name}}
            </label>
          </div>
        </fieldset>

      </form>
    </div>

    <hr>
  <h2>Results:</h2>

    <div class="row result-list">
      <div class="col-md-4 hero" *ngFor="let hero of heroes">
        <h3>Name: {{hero.name}}</h3>
      </div>
    </div>
  </div>

Possible duplicate of Setting one object equal to another object with the assignment operator in Javascript — Dexygen
– Dexygen, Commented Dec 25, 2017 at 22:09

HDJEMAI · Accepted Answer · 2017-12-26 05:17:24Z

2

If you want to make a clone for the array this.fullHeroes into the array this.heroes, use:

this.heroes = JSON.parse(JSON.stringify(this.fullHeroes));

This way you will do a full copy of the array this.fullHeroes into this.heroes one, and then changes in this.heroes will not affect the other array.

edited Dec 26, 2017 at 5:17

answered Dec 25, 2017 at 17:27

HDJEMAI

9,85048 gold badges78 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MadScientisto Over a year ago

Thank you very much this solved my first problem. However it seems like just using this.heroes = JSON.parse(JSON.stringify(this.fullHeroes)); doesn't solve my logical problem with getting the correct results based on the selected checkboxes.

HDJEMAI Over a year ago

this is an answer for Angular cloned array gets changed automatically if it helped you then accept the answer that it can help other peoples. For the other problem you have, you can ask a new more specific question for that, that way you can get more help.

JB Nizet · Accepted Answer · 2017-12-25 17:04:09Z

0

this.heroes = this.fullHeroes

After you execute that line, every time you mutate heroes, you also mutate fullHeroes, since they both refer to the same array. You need to make a copy of fullHeroes.

Note that you're abusing map() where you should be using forEach(). And you're using a loop where you could use some().

answered Dec 25, 2017 at 17:04

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

1 Comment

MadScientisto Over a year ago

Thank you for the answer. I'm using forEach instead of map and using slice to create a real copy of the fullHeroes. However that doesn't solve my logical problem with displaying the correct result based on the selected checkboxes. Is there a simpler alternative way to get that thing done?

HDJEMAI · Accepted Answer · 2017-12-26 14:22:39Z

0

You can use the TypeScript spread operator to clone the array:

const a1 = [1, 2, 3, 4, 5, 6];
const a2 = [...a1];

edited Dec 26, 2017 at 14:22

HDJEMAI

9,85048 gold badges78 silver badges99 bronze badges

answered Dec 25, 2017 at 23:57

JayChase

11.6k3 gold badges52 silver badges55 bronze badges

Collectives™ on Stack Overflow

Angular cloned array gets changed automatically

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related