Angular 8: Array .map() .slice() No funcionan

Question

Angular 8 with Firebase: Array .map () .slice () Do not work. Hi. I have been trying to make a copy of an array using .map () and .slice () in Angular 8, but using these methods I find that the copied array still has the reference to the original array.

I don't know if I'm doing it wrong, or these methods don't work in Angular 8.

 // Iniciamos la escucha de los cambios de la data del usuario
    if (!this.$userData) {
      this.$userData = this.userService.user().valueChanges().subscribe(data => {
        if (data) {
          this.userData = Object.assign({}, data);
          const temp = data.operationsList.map((x) => {
            x.bank = 'Popular';
            return x;
          });
          console.log(this.userData.operationsList, temp);
          if (!this.userData.validated) {
            this.router.navigate(['register/pendingValidation']);
          }
        }
      });
    }

console.log:

(2) [{…}, {…}]
0: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}
1: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}

(2) [{…}, {…}]
0: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}
1: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}

When modifying the copied array, the changes are also reflected in the original array.

If you're copying the array already, why not just use const temp = this.userData.operationList.map(...) for your map? — Jbluehdorn
– Jbluehdorn, Commented Sep 4, 2019 at 20:53
Not a direct duplicate, but has the same idea. stackoverflow.com/q/52085758/575527 . Object.assign() only does a "shallow clone". — Joseph
– Joseph, Commented Sep 4, 2019 at 20:57
@Jbluehdorn I already tried it that way, and the result is the same. — Leandro Cardenas
– Leandro Cardenas, Commented Sep 4, 2019 at 20:59

mbojko · Accepted Answer · 2019-09-04 20:55:28Z

2

By copying an array, you're still keeping references to the same objects. So you need to go one level deeper:

const temp = data.operationsList.map((x) => Object.assign({}, x, { bank: 'Popular' }));

answered Sep 4, 2019 at 20:55

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

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

3 Comments

Leandro Cardenas Over a year ago

Thanks, it worked for me. What I don't understand is why in javascritp the .map () function works fine, but using angular and firebase the reference to the original array is maintained.

mbojko Over a year ago

Angular has nothing to do with it. If you map or slice an array of primitives (like numbers, strings or Booleans), you're fine, you're creating a legit, independent copy. With an array of objects you need to be a little more careful.

Deepak swain Over a year ago

Wr8. Still, if you want to assign value to array, then try using Spread Operator

Jbluehdorn · Accepted Answer · 2019-09-04 20:54:54Z

0

You're modifying a direct reference to the underlying data directly within your map. Change it to something like:

let tempX = Object.assign({}, x);
tempX.bank = 'Popular';
return tempX;

answered Sep 4, 2019 at 20:54

Jbluehdorn

4752 silver badges11 bronze badges

1 Comment

Leandro Cardenas Over a year ago

It did not work, still maintaining the reference to the original array.

Collectives™ on Stack Overflow

Angular 8: Array .map() .slice() No funcionan

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related