Console.log outputting data from later code [duplicate]

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
– Álvaro González, Commented Oct 31, 2016 at 9: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 minimal reproducible example — Quentin
– Quentin, Commented Oct 31, 2016 at 9: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
– Brad, Commented Oct 31, 2016 at 9:35
"not sure why you think its an undefined value" — Because it is: jsbin.com/masozo/1/edit?html,js,console,output — Quentin
– Quentin, Commented Oct 31, 2016 at 9: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
– Brad, Commented Oct 31, 2016 at 9:42

Hussain · Accepted Answer · 2016-10-31 09:37:42Z

2

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"}

answered Oct 31, 2016 at 9:37

Hussain

212 bronze badges

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

Comments

Asim Khan · Accepted Answer · 2016-10-31 09:37:26Z

1

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.

edited Oct 31, 2016 at 9:37

answered Oct 31, 2016 at 9:17

Asim Khan

5706 silver badges34 bronze badges

Comments

Arshad Khan · Accepted Answer · 2016-11-01 10:06:47Z

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.

Collectives™ on Stack Overflow

Console.log outputting data from later code [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related