js array.length called from variable doesn't work, why?

Question

Here is code that I have copied from w3schools, I have different code, but the problem that I am having still happens in this simplified coding.

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to create an array, then display it's length</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var foods = ["steak","pizza","bread","fruits"];
var x=document.getElementById("demo");
var y=foods[3];
x.innerHTML= y.length;
}
</script>

</body>
</html>

When I do x.innerHTML= fruits.length;, I get 4 back which is what I want to get.

But when I call

var y=foods[3];
x.innerHTML= y.length;

I get 6 which is the length of the word "fruits" but I want the length of the array fruits.

How do I do this?

I'm using jQuery, don't know if that affects anything. Do I have to add parenthesis or brackets somewhere?

No, you don't have to add parenthesis, you just have to query fruits instead of foods. Unless there's something I'm missing. — Mr Lister
– Mr Lister, Commented Jan 20, 2013 at 20:13
possible duplicate of Is there a way to access a javascript variable using a string that contains the name of the variable? — Felix Kling
– Felix Kling, Commented Jan 20, 2013 at 20:17
@JosephSilber Can you stop using w3fools as a reference, please. They are not. — Mr Lister
– Mr Lister, Commented Jan 20, 2013 at 20:21
@FelixKling it's not a duplicate of that because the variable in this question is local, not global. — Alnitak
– Alnitak, Commented Jan 20, 2013 at 20:22

Alnitak · Accepted Answer · 2013-01-20 20:35:24Z

3

If (and only if) a variable (myVar) contains the name of a property of another object (myObj) you can use:

myObj[myVar]

to access that property.

In this case, your fruits array is just a normal local variable, so there's no way (short of the frowned-upon eval function) to access it indirectly.

You can of course use fruits.length to directly find its length.

A better solution would be a nested object of foods, and not an array:

var foods = {
    fruits: [ "Banana", "Orange", "Apple", "Mango" ],
    steak: [ ... ],
    pizza: [ ... ],
    bread: [ ... ]
};

at which point you can use the syntax above and write:

var myType = 'fruits';
var count = foods[myType].length;

edited Jan 20, 2013 at 20:35

answered Jan 20, 2013 at 20:20

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

Comments

Gabriele Petrioli · Accepted Answer · 2013-01-20 20:17:21Z

2

Maybe what you want is

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var foods = ["steak","pizza","bread", fruits];

This way your code will work, since we have stored a reference to the array fruits inside the foods instead of the string "fruits".

answered Jan 20, 2013 at 20:17

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

Alnitak Over a year ago

this will work, but IMHO it's not a good solution. I'm pretty sure the OP wants to use the string "fruits" to indirect into that array.

Gabriele Petrioli Over a year ago

@Alnitak, i am sure using an object is the proper solution to such problems. My answer is a bit directly based on the var y = foods[3]; part of the question..

snooze92 · Accepted Answer · 2013-01-20 20:41:04Z

2

You seem to have a huge misunderstanding of the difference between the variable identifier fruits and the string "fruits".

Let's describe your code together so you understand well what you are doing.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

You have a variable named fruits which identifies an array of four elements, all strings. You could do the following with that array:

alert(fruits.length); // 4
alert(fruits[0]); // Banana
alert(fruits[3]); // Mango
alert(fruits); // Banana, Orange, Apple, Mango

var foods = ["steak","pizza","bread","fruits"];

You have a variable named foods which identifies an array of four elements, again: all strings. You could again do the following:

alert(foods.length); // 4
alert(foods[0]); // steak
alert(foods[3]); // fruits
alert(foods); // steak, pizza, bread, fruits

You try to count the fruits, doing foods[3].length

You should notice that when we did alert(fruits), it displayed Banana, Orange, Apple, Mango. And when we did alert(foods[3]), it displayed fruits. This should give you a hint: the array you named fruits and the string "fruits" are two different things!

That is why foods[3].length is 6, because the length of "fruits" is 6.

Solution

EDIT: Check Altiniak's answer. I leave the rest of my post for the long and valid explaination. The idea of using window was almost worse than using eval()...

edited Jan 20, 2013 at 20:41

answered Jan 20, 2013 at 20:33

snooze92

4,2462 gold badges31 silver badges40 bronze badges

8 Comments

Gabriele Petrioli Over a year ago

fruits is not a global variable so window[foods[3]].length; will not work. The OP's code is inside a function so nothing get store in the global scope..

snooze92 Over a year ago

My mistake. I will edit, but there is nothing to add to Alnitak's answer anymore ;) I would upvote his if I could :P

Alnitak Over a year ago

@snooze92 downvote removed - you're neutral now ;-) Why can't you upvote?

snooze92 Over a year ago

@Alnitak I created my StackOverflow account 2h ago, still missing 6 "reputation points" until I can upvote :)

Alnitak Over a year ago

@snooze92 oh yeah, I forgot that new accounts can't even upvote :)

|

Mathew Thompson · Accepted Answer · 2013-01-20 20:21:02Z

1

In the following:

var y=foods[3];
x.innerHTML= y.length;"

You are assigning the 4th element in the foods array to the y variable, which is the string "fruits". If you want the length of the array, just do this:

x.innerHTML = foods.length;

EDIT: I am assuming you just want the length of the foods array and NOT to store the fruits array in the foods variable (if you need that, Gaby's answer can give you that)

edited Jan 20, 2013 at 20:21

answered Jan 20, 2013 at 20:13

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

7 Comments

Amberlamps Over a year ago

He actually wants to access the fruits array by using the foods array.

Mathew Thompson Over a year ago

@Amberlamps OP says "I get 6 which is the length of the word "fruit" but i want the length of the array fruit."

Felix Kling Over a year ago

@mattytommo: Exactly. foods[3] is the word fruits and he wants to access the variable with that name. I had to read it a couple of times until I understood what the OP wants.

Amberlamps Over a year ago

@mattytommo: I am pretty sure, that he wants what I described and also what Felix said.

Alnitak Over a year ago

The OP clearly wants to indirect from the string "fruits" into the local array of the same name.

|

Mr Lister · Accepted Answer · 2013-01-20 20:20:00Z

0

Hope I get what you want. You you have the word "fruits" and from that, you want to fetch the contents of the var named fruits, right?

That can be done using eval.

var fruitlen = eval('fruits').length;

Is this what you wanted?

answered Jan 20, 2013 at 20:20

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

1 Comment

Mr Lister Over a year ago

@ChristopheL Then let's hope this is not what the OP is asking for! Oh, and I like Alnitak's answer.

Collectives™ on Stack Overflow

js array.length called from variable doesn't work, why?

5 Answers 5

Comments

2 Comments

8 Comments

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

8 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related