Why is my JSON object changing before I manipulate it?

Question

Here's my code:

var data = $.parseJSON('[{"Date":"2014-02-19","Count":"963"},{"Date":"2014-02-20","Count":"2638"}]');
console.log(data);
console.log(typeof data[0].Count);
data.forEach(function(d) {
    d.Count = +d.Count;
});
console.log(typeof data[0].Count);

The first console log treats my Counts as numbers inside of each object.

The second console log is string.

The final console.log is number.

Can someone explain to me why the first console log treats each Count as a number, when I'm logging the data object prior to Count being manipulated into a number with the d.Count = +d.Count line of code?

Here's a fiddle with the code in it: http://jsfiddle.net/b73fZ/

google chrome magic. Try logging it first, adding a delay, and expanding the object in the console before the delay ends. The magic goes away. http://jsfiddle.net/b73fZ/ If you don't expand the object before the delay finishes, it will instead show a number. i don't know the specifics behind it, but to me it looks like chrome doesn't look at the properties of the object until they are needed for display. — Kevin B, Feb 26 '14 at 19:16

score 1 · Answer 1 · edited May 23 '17 at 11:50

I believe this has to do with the timing of the console output regarding objects. Take a look at these:

If you're using Chrome/webkit you may see a "little blue i" near the disclosure triangle ("twistie") whose tooltip reveals that the data is populated when the developer first expands the twistie. I modified your jsFiddle example slightly here and you can see the output is what you'd expect:

var data = $.parseJSON('[{"Date":"2014-02-19","Count":"963"},{"Date":"2014-02-20","Count":"2638"},{"Date":"2014-02-21","Count":"1962"},{"Date":"2014-02-22","Count":"1122"},{"Date":"2014-02-23","Count":"1192"},{"Date":"2014-02-24","Count":"2204"},{"Date":"2014-02-25","Count":"1906"},{"Date":"2014-02-26","Count":"1362"}]');
console.log(data);                  // (twistie) [Object, Object, Object, Object, Object, Object, Object, Object]
$.each(data, function () {
    console.log(this);              // Object {Date: "2014-02-19", Count: "963"}, Object {Date: "2014-02-20", Count: "2638"}, ... 
});
console.log(typeof data[0].Count);  // string
data.forEach(function (d) {
    d.Count = +d.Count;
});
console.log(typeof data[0].Count);  // number

score 0 · Answer 2 · answered Feb 26 '14 at 19:22

Try it as

var data = $.parseJSON('[{"Date":"2014-02-19","Count":"963"},{"Date":"2014-02-20","Count":"2638"},{"Date":"2014-02-21","Count":"1962"},{"Date":"2014-02-22","Count":"1122"},{"Date":"2014-02-23","Count":"1192"},{"Date":"2014-02-24","Count":"2204"},{"Date":"2014-02-25","Count":"1906"},{"Date":"2014-02-26","Count":"1362"}]');
data.forEach( function (d) {
    Object.keys(d).forEach (function (e) {
        document.write(e + ' ' + typeof e + ' ');
    })
    document.writeln("<br>");
});
document.writeln("<br>"+typeof data[0].Count);
data.forEach(function(d) {
    d.Count = +d.Count;
});
document.writeln("<br>"+typeof data[0].Count);

Date string Count string 
Date string Count string 
Date string Count string 
Date string Count string 
Date string Count string 
Date string Count string 
Date string Count string 
Date string Count string 

string 
number

You'll see that it's probably a console.log bug, as suggested by comments.

It's actually not a bug but rather a common misunderstanding of what `console.log` actually does. It captures the *reference* of the object when it is executed but does not necessarily save a copy of state at that time. So what you actually see in the console is not necessarily what the object held at the time `console.log` was called. — jacobq, Feb 26 '14 at 19:40

score 0 · Answer 3 · answered Feb 26 '14 at 19:35

When you console.log(data), the data object has the value after all the modifications, this mean that have applied the forEach, so it display the Count as Number.

Let me explain with an example

var data = $.parseJSON('[{"Date":"2014-02-19","Count":"963"},{"Date":"2014-02- 20","Count":"2638"}]');
    console.log(data);                  //The log will show you 20 rather than 963.
    data[0].Count = 20;                 //Modify the object

In the example we first console the data and we expected that the Count have a value of 963, but it have the value of 20.

For this reason the first console log treats the Counts as numbers, because you modify it in the foreach.

Why is my JSON object changing before I manipulate it?

3 Answers3