Console.log outputting data from later code

Question

Sorry about the shoddy title of this question - I really can't describe the problem any more succinctly!

I can't figure out what's happening in my code! I have an object which looks like this:

var fruits = {name: "bananas", quantity:  "3"}

And an quantity input field (#qty) whose value is (let's say) 2.

console.log(fruits);
alert(fruits[0].quantity); //outputs 3
fruits[0].quantity = Number(fruits[0].quantity) + Number($("#qty").val());
alert(fruits[0].quantity); //outputs 5

The problem is that after all of this runs, when I go into the console to inspect the output of console.log(fruits);, the console shows {name: "bananas", quantity: 5}.

P.S. Notice the added quantity and lack of quotation marks!

Any ideas what's happening?

Why `fruits[0]`? You don't have an array or a property called `0`. Your code shouldn't run at all (but if it did, the output would be correct, wouldn't it?). — Álvaro González, Oct 31 '16 at 09:15
`alert(fruits[0].quantity); //outputs 3` — no, it throws an exception because you are trying to read `quantity` of an undefined value. Show us a real [MCVE] — Quentin, Oct 31 '16 at 09:17
Thanks all. The reason I include `fruits[0]` rather than `fruits` is that when omit the `[0]` I receive `undefined` and `NaN` as my `alert()s`. @Quentin, not sure why you think its an undefined value... But yes, it looks like your duplicate suggestion is the answer. The suggestion there was to console.log a copy of the variable, rather than the variable itself, as the variable is manipulated (added) before the console actually logs it, which is why when it finally gets to logging it, it displays the added values. — Brad, Oct 31 '16 at 09:35
"not sure why you think its an undefined value" — Because it is: http://jsbin.com/masozo/1/edit?html,js,console,output — Quentin, Oct 31 '16 at 09:36
Thanks @Quentin. I've altered my personal code to make it simpler to post here. I'm not sure why it's undefined here, but it works well on my server. — Brad, Oct 31 '16 at 09:42

score 2 · Answer 1 · answered Oct 31 '16 at 09:37

That's because the quantity that's being assigned to fruits[0].quantity is a Number. If double quotes " will appear if this quantity is a String.

So what you can do is typecast this Number to String using String() function of javascript.

fruits[0].quantity = String(Number(fruits[0].quantity) + Number($("#qty").val()));

Output

{name: "bananas", quantity:  "5"}

Asim Khan · Answer 2 · 2016-10-31T09:37:26.550

When you log the state of a JSON it shows the current state of object at the time you are viewing it. Whenever you open the Object from Console you will see the latest changes there.

<script> var fruits = {name: "bananas", quantity:  "3"}
 function fnincrement1(){
 console.log(fruits);
 
 }
 function fnincrement2(){
 fruits.quantity = Number(fruits.quantity)+3;
 console.log(fruits);
 
 }
</script>
<button onclick='fnincrement1()'>
button1
</button>

<button onclick='fnincrement2()'>
button2
</button>

You can view the video of the above code for clarity.

Arshad Khan · Answer 3 · 2016-11-01T10:06:47.693

First of all, you are using a wrong way to get value from a object i.e., fruits variable(json is valid object). There are two ways to fetch properties of an object:

var obj = {
    key1: value1,
    key2: value2
};

Using dot notation:

obj.key1

Using square bracket notation:

obj["key2"]

The first form is used when you know the name of the property. The second form is used when the name of the property is dynamically determined.

My guess is that you are having an array of objects.

Something like:

var fruits = [
{name: "bananas", quantity:  "3"},
{name: "apples", quantity:  "4"},
...
];

So if this is the case and you are doing something like -

fruits[0].quantity = Number(fruits[0].quantity) + Number($("#qty").val());

you are Selecting the first object of fruits array i.e., {name: "bananas", quantity: "3"} and then changing its 'quantity' property to a 3 + 2 (Number(fruits[0].quantity) + Number($("#qty").val()))i.e., 5 (Remember: It is a number not a string because you explicitly casted it using Number()). That's why in console.log you don't see quotes.

Number() is a function in javascript that return numeric form of value that is passed to it. So if you do something like Number("30"), it will return 30 as a number but not as a string.

Console.log outputting data from later code

3 Answers3