How to increment the objects key values using set interval

Question

Here's what I am trying: I have an object and I'm trying increment the values by 0.01 & 1 using setInterval

my object

 var data = {
  timer: {
        "num": "0.1",
        "perfection": "0",
    }
 }

here num value has to be increased by 0.1 & perfection value by 1 and if perfection's value reaches 100 then it has to stop using set interval

var data = {
  timer: {
      "num": "0.0",
      "perfection": "0"
  }
}
var info = [];
var maxValue=101;

setInterval(loop,2000)
    
function loop(){
 for(var i = 0; i < maxValue; i++) {
     data['timer']['perfection'] = i; 
       console.log(data)
  }
}

If you know you want to use setInterval, where is your code attempt to do so? — charlietfl, Aug 05 '19 at 11:59
as said, use `setInterval` (you don't need a for loop), store it in a variable and when the values reach the amount you want, clear that interval. — Calvin Nunes, Aug 05 '19 at 12:02
Is there something specific you're having difficulty with? You seem to know how to use `setInterval` and how to change object properties. — freedomn-m, Aug 05 '19 at 12:05
you don't need a `for` loop you need just a variable keeping track of how many times `setInterval` called the function to increment, when it reaches 100, use `clearInterval()` on the variable that holds the interval` — Calvin Nunes, Aug 05 '19 at 12:07
The problem is that your "values" are strings, so when you `+1` or whatever, it goes "011111.." rather than "0,1,2,3". Make the original object values numbers: `var data = { time : { num: 0.0, perfection: 0 } }` — freedomn-m, Aug 05 '19 at 12:10

score 2 · Answer 1 · answered Aug 05 '19 at 12:14

unable to increment values of the object

The original values are strings, so these (ideally) need to be numbers to be able to increment.

var data = {
  timer: {
    "num": 0.0,
    "perfection": 0
  }
}

You can then increment with

data.timer.perfection += 1

The next issue you'll have is when to stop the setInterval - this can be done with clearInterval using the return value of the original setInterval.

Updated code:

var data = {
  timer: {
    "num": 0.0,
    "perfection": 0
  }
}

// reduced values for demo purpose
var maxValue = 10;
var intervalId = setInterval(loop, 200) 

function loop() {
  data.timer.num += 0.1
  data.timer.perfection += 1
  if (data.timer.perfection >= maxValue) {
    clearInterval(intervalId);
    console.log(data)
  }
}

Calvin Nunes · Accepted Answer · 2019-08-05T12:15:33.033

You don't need a for loop, you need just a variable keeping track of how many times setInterval called the function to increment, when it reaches 100, use clearInterval() on the variable that holds the interval.
Using just data['timer']['perfection'] = i; will not increment data.timer.num it will just set the data.timer.perfection to the exact same value as i. You need to explicitely increment both properties, see below

Also, I changed the values on the object to numbers, if you can't do this, you'll need to parse the values, otherwise it will concatenate ("0" + 1 = "01")

var data = {
  timer: {
      "num": 0.0,
      "perfection": 0
  }
}
var i = 0;
var maxValue = 100;

var interval = setInterval(increment, 100)
    
function increment(){  
   data.timer.perfection += 1;   
   data.timer.num += 0.1; 
   console.clear()
   console.log(data) 
   i++;
   if (i >= maxValue) {
    clearInterval(interval)
    console.log("finish")
   }
}

And as you can see, the JS decimal value can be a little "broken", because adding 0.1 may make your num to be something like 0.299999999 instead of 0.3, for example. (further read: How to deal with floating point number precision in JavaScript?)

How to increment the objects key values using set interval

2 Answers2