array push with JSON

Question

Can some one tell me why this prints numbers from 117 to 300?

var x = [12, 55, 177];
var y = [25, 75, 255];
var value = [];
for (var i = 1; i <= 300; i++) {
 value.push(JSON.stringify(i));
 document.write(value);
} ​

Result:

117, 118, ..., 299, 300 

(jsFiddle http://jsfiddle.net/minagabriel/6crZW/)

• Ben Clayton: What are the x and y variables about?
• Tomalak: Pro tip: If you want to find out what your code does, use a debugger. There's one built into your browser.
• user1170618: jsfiddle.net/minagabriel/6crZW/10

Answer 1

It does that because document.write() is an old nasty hack that shouldn't be used, and isn't compatible with jsfiddle.

If you remove that from the loop and add:

console.log(value);

at the very end you'll see that the array is correctly accumulated.

Furthermore, you probably only want to JSON encode the array after it's built:

var value = [];
for (var i = 1; i <= 300; i++) {
 value.push(i);
} 
console.log(JSON.stringify(value));

• T.J. Crowder: While it's true that document.write isn't ideal, the problem isn't an incompatibility with jsFiddle; I just tried this with a standalone file and it really starts with 177; something about having a really long line or something...
• T.J. Crowder: To my surprise, jsFiddle seems fine with document.write: jsfiddle.net/VtzJq The problem (other than that the code almost certainly wasn't what the OP intended) seems to be a Chrome bug in an edge case around very long lines with no whitespace being built up by document.write.

Answer 2

Just move your array printing outside of the loop and it will work:

var x = [12, 55, 177];
var y = [25, 75, 255];
var value = [];
for (var i = 1; i <= 300; i++) {
 value.push(JSON.stringify(i)); 
} 
document.write(value);
​

http://jsfiddle.net/6crZW/8/

Answer 3

First off, this has nothing to do with array.push or JSON. :-)

Your code doesn't output 117,118, etc., first. That's just how Chrome's displaying it for you. You seem to be hitting some internal limits or bug in Chrome related to a line with no whitespace in it. In Firefox, it doesn't do that.

Fundamentally, your code is outputting the array repeatedly without any line breaks. So on the first iteration of your loop, you output

1

...with no line break. On the second iteration, you output 1,2 with no line break, and so we have:

11,2

...and on the third, you output 1,2,3:

11,21,2,3

...and so on until you have realy quite a long line. For some reason, Chrome ultimately loses it and displays a bunch of spaces followed by the text, a bit jumbled.

You probably want to output the final array at the end by moving your document.write statement. Alternately, you could use document.writeln which will put a line break at the end of each line (this seems to make Chrome happy; the output is still very hard for humans to read, though, since of course a line break in HTML just results in a space, not an actual line break).

But better by far would be to use something more modern than document.write, like (for instance) appending to the document.body: http://jsfiddle.net/CLmYW/

var value = [];
for (var i = 1; i <= 300; i++) {
 value.push(i);
 display(value);
}
function display(msg) {
 var p = document.createElement('p');
 p.innerHTML = msg;
 document.body.appendChild(p);
}

...which nicely outputs

1
1,2
1,2,3
1,2,3,4
1,2,3,4,5
1,2,3,4,5,6
1,2,3,4,5,6,7
1,2,3,4,5,6,7,8
1,2,3,4,5,6,7,8,9

...and so on.

console.log is also quite useful for just looking at the state of things as you're working on stuff. It's supported in the dev tools of all up-to-date major browsers.

Also note that I've removed the JSON.stringify; all that was doing was returning a string version of your index counter, and in the output it doesn't matter whether the numbers in the array are really numbers or strings.