Creating an auto populating javascript array

Question

I want to populate two arrays in javascript to simulate timely updating chart. For this I want two charts to be populate.

var array1 = [1,2,3,...] //time in seconds var array2 = [10,15,12,...] //any random number

Each element should be pushed to the arrays with one second of interval.

Tried this but arrays are not getting updated as I want.

var time = [];
var value = [];

$(document).ready(function() {
    update();
});

    function update() {
      var index = 0;
      setTimeout(function () {
        index++;
        time.push(index);
        value.push(Math.random() * (0 - 200));
        console.log(time)
        console.log(value)
        update();
      }, 1000);
    }

Silly mistake of putting index inside the function. Updated it correctly. — Yasitha
– Yasitha, Commented Dec 18, 2014 at 8:16
don't fix your question now specially if it was the source of the main mistake. Otherwise the Answers will look silly. — Roko C. Buljan
– Roko C. Buljan, Commented Dec 18, 2014 at 8:23

Roko C. Buljan · Accepted Answer · 2014-12-18 08:25:09Z

3

fiddle

var index = 0 It's not getting updated cause at every iteration you're resetting it to 0. Move it outside of your update() fn

So try like:

var index = 0 ; // Outside the update fn scope
var time = [];
var value = [];

$(document).ready( update );

function update() {
    setTimeout(function () {
        time.push(++index);
        value.push( ~~(Math.random() * 200 ) + 1);
        console.log(time)
        console.log(value)
        update();
    }, 1000);
}

edited Dec 18, 2014 at 8:25

answered Dec 18, 2014 at 8:13

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

1 Comment

Alex Over a year ago

I was suspecting I wasn't reading the same thing ... let's clear up comments

rnrneverdies · Accepted Answer · 2014-12-18 08:13:08Z

1

You should move var index = 0; outside of update function.

var time = [];
var value = [];

$(document).ready(function() {
  update();
});
var index = 0;

function update() {

  setTimeout(function() {
    index++;
    time.push(index);
    value.push(Math.floor(Math.random() * 200));
    console.log(time)
    console.log(value)
    update();
  }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Dec 18, 2014 at 8:13

rnrneverdies

15.7k9 gold badges67 silver badges95 bronze badges

Comments

Alex · Accepted Answer · 2014-12-18 08:13:40Z

1

You're after setInterval (almost same usage as setTimeout you're using).

Difference is, setTimeout runs the function once after the specified timeout, while setInterval runs repeatedly.

Also check out clearInterval (to be run on the return value of setInterval) which stops the execution of the function.

// to start
var interval = setInterval(function () { /* ... */ }, 1000);

// to stop
clearInterval(interval);

You also no longer need to invoke update() inside itself after switching functions.

answered Dec 18, 2014 at 8:13

Alex

23.3k4 gold badges43 silver badges76 bronze badges

Collectives™ on Stack Overflow

Creating an auto populating javascript array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related