CODEWITHSUNDEEP
javascriptjquery
Dropoff510
Dropoff510

Reputation: 51

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

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?

Upvotes: 1

Views: 4268

Answers (5)

snooze92
snooze92

Reputation: 4228

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()...

Upvotes: 2

Alnitak
Alnitak

Reputation: 339786

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;

Upvotes: 3

Mathew Thompson
Mathew Thompson

Reputation: 56429

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)

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46539

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?

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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

Upvotes: 2

Related Questions