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?
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?
Share Improve this question edited Jan 20, 2013 at 20:20 Felix Kling 817k181 gold badges1.1k silver badges1.2k bronze badges asked Jan 20, 2013 at 20:11 Dropoff510Dropoff510 513 silver badges7 bronze badges 9-
No, you don't have to add parenthesis, you just have to query
fruitsinstead offoods. Unless there's something I'm missing. – Mr Lister Commented Jan 20, 2013 at 20:13 - 2 Please! Don't use w3schools to teach you anything! – Joseph Silber Commented Jan 20, 2013 at 20:14
- possible duplicate of Is there a way to access a javascript variable using a string that contains the name of the variable? – Felix Kling Commented Jan 20, 2013 at 20:17
- 2 @JosephSilber Can you stop using w3fools as a reference, please. They are not. – 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 Commented Jan 20, 2013 at 20:22
5 Answers
Reset to default 3If (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;
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".
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()...
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)
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?