Unable to update the key value of json objects in an array with another list of array values in angu-CodePudding

While i'm trying to update the key values of an array of json objects using the values from another array:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  arr = [
    { name: 'Rakesh', age: 24 },
    { name: 'Ram', age: 26 },
  ];
  ar = [45, 50];
  array = [];


  ngOnInit() {
    this.myfunc();
  }

  myfunc(): void {
    this.arr.forEach((e) => {
      this.ar.forEach((el) => {
        e['age'] = el;
        this.array.push(e);
      });
    });
    console.log(this.array);
  }
}

While looping, age is getting updated with each value as in array, but on pushing into the array, the value of key(age) of json objects are getting updated with the last element of the array. How can I make this work?

Below is the output I'm getting:

    Output of my code:
    [{ name: 'Rakesh', age: 50 },
    { name: 'Rakesh', age: 50 },
    { name: 'Ram', age: 50},
    { name: 'Ram', age: 50 },]
    
    Expected output:
    [
    { name: 'Rakesh', age: 45 },
    { name: 'Rakesh', age: 50 },
    { name: 'Ram', age: 45 },
    { name: 'Ram', age: 50 }
    ]

CodePudding user response：

instead of directly pushing e, you want to create a new object.

var item = {name: e.name, age: el}
this.array.push(item);

otherwise, you are just changing the age value of e twice.

CodePudding user response：

First, let's rename the variables for better understanding.

const persons = [{ name: 'Rakesh', age: 24 }, { name: 'Ram', age: 26 }];
const newAges = [45, 50];

const result = [];
persons.forEach((person) => {
  newAges.forEach((newAge) => {
    person['age'] = newAge;
    result.push(person);
  });
});

JavaScript/TypeScript

To explain the problem, I will pretend that persons only has a length of 1.

result := Array
First Iteration (persons, i := 0):
   person := person[i] := { name: 'Rakesh', age: 24 }
   
   First Iteration (newAges, j := 0):
      newAge := newAges[j] := 45

      // person := persons[0].age will now have an age of 45
      person.age := newAge

      // After adding the person, result contains: { name: 'Rakesh', age: 45 }
      result.push(person);

   SecondIteration (newAges, j := 1):
      newAge := newAges[j] := 50

      // person := persons[0].age will now have an age of 50
      person.age := newAge

      // After adding the person, result contains:
      // { name: 'Rakesh', age: 50 }, { name: 'Rakesh', age: 50 }
      result.push(person);

Pseudo-Code

You are adding the same object (= same memory address) newAges.length - 1 times into result. That's why only the last iteration of newAges is considered in terms of the age property.

If you are sure that persons.length === newAges.length, you can achieve the update of ages like this:

const persons = [{ name: 'Rakesh', age: 24 }, { name: 'Ram', age: 26 }];
const newAges = [45, 50];

persons.forEach((person, index) => {
    person.age = newAges[index];
});

console.log(persons);

JavaScript/TypeScript