JavaScript | Create interval that changes a value in an array

Question

I have an array, a simplified form would be this:

let array = [
  {id: 1, value: 0}, 
  {id: 2, value: 0}, 
  {id: 3, value: 0}
];

Now I want to create an interval, that increments the value on the object with id: 3 every second. What I would do now is target the object with array[2].value. This works as long as the array doesn't change.

The array I use is changing constantly, that means that elements get deleted/add in an asynchronous manner. When that happens the interval is pointing at the wrong element. If I would delete element [1] in the example, the interval would now point at an undefined element ([2]).

I was thinking of using an associative array (id as index), but in Angular ngFor does not work reliably anymore when I do that. Objects are also not working because of the same reason.

How can I create an interval that changes a property of an array element even when the index changes? Or is there a better solution to my problem?

So you need to target key, instead index? Something like this? jsfiddle.net/9jqu6dhv — sinisake
– sinisake, Commented Dec 16, 2017 at 11:50
This works. Do you have an explanation why? The code increments the value of the new array .filter created, but somehow the old array changes aswell? :o — user2324232322
– user2324232322, Commented Dec 16, 2017 at 12:00
stackoverflow.com/questions/24304383/… "It returns a new array, but the array's entries are still references to the same objects." — sinisake
– sinisake, Commented Dec 16, 2017 at 12:11
Alright, thanks a lot. This really has to be documented a bit more - no tutorial and not even the mozilla site explains this enough — user2324232322
– user2324232322, Commented Dec 16, 2017 at 12:15

Mohammad Kermani · Accepted Answer · 2017-12-16 11:58:25Z

1

Use find method:

function updateValue () {
   var item = array.find(item => item.id === 3)
   if (item) item.value++
}

setTimeout(updateValue, 1000)

edited Dec 16, 2017 at 11:58

Mohammad Kermani

5,4368 gold badges39 silver badges63 bronze badges

answered Dec 16, 2017 at 11:53

eosterberg

1,46211 silver badges11 bronze badges

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

2 Comments

user2324232322 Over a year ago

Thanks a lot, this works perfectly. Finally not stuck on this issue anymore! :D

eosterberg Over a year ago

Great! Since items in the array are objects, they will still update in the array even if referenced outside.

user184994 · Accepted Answer · 2017-12-16 12:03:36Z

1

You should hold a reference to the object, instead of using the index each time. For Example:

let array = [
  {id: 1, value: 0}, 
  {id: 2, value: 0}, 
  {id: 3, value: 0}
];

function startIncrementing(elem) {
  setInterval(() => elem.value += 5, 500);
}

// Log the array every second
setInterval(() => console.log(array), 1000);

// Start the increment interval
startIncrementing(array[2]);

// Remove an elemnt after 1 second
setTimeout(() => array.splice(1, 1), 1000);

answered Dec 16, 2017 at 12:03

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Collectives™ on Stack Overflow

JavaScript | Create interval that changes a value in an array

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related