Does the entire array with objects change in the array?

Question

JavaScript

https://codepen.io/anon/pen/QQamjX
there is also a description in css
The task is to change timeStart to true at the specified time in an array of attr objects
, the time is indicated in time
and it turns out it changes in the entire array
here is an example->
it will work if on the 10th line
transfer an array to a direct one, but it doesn’t work for me an array from redax, I get
grafik.forEach((elem)=>{
elem.attr = [{"title":"Hamam", "time":"1 hour 30 minutes", "timeStart ":false, "free":true},{"title":"Sauna", "time":"1 hour 30 min", "timeStart":false, "free":true}]
})

Answer 1

You are passing a reference to the same array to all elements of the graffik array :

grafik.forEach(elem => {
  elem.attr = attr; 
});

When you pass it directly, it works precisely because you create a new array with new objects each time.
You need to pass copies of the array with copies of nested objects. You can do it like this:

grafik.forEach(elem => {
  elem.attr = attr.map(el => ({ ...el }));
});

Or if you are not using the spread operator:

grafik.forEach(elem => {
  elem.attr = attr.map(el => Object.assign({}, el));
});