Working with javascript variable arrays

Question

I'm trying to return the results from each list, using an array of variables containing the names of the lists.

var filters = ["colour", "size", "len", "s_length", "occasion"];
var colour = ["black", "white", "blue", "brown", "gold",
 "green", "grey", "multi", "nude", "orange", "pink",
 "purple", "red", "silver", "yellow"];
var size = ["XS", "S", "M", "L", "UK 6", "UK 8",
 "UK 10", "UK 12", "UK 14", "UK 16", "UK 18+"];
var len = ["maxi", "midi", "mini"];
var s_length = ["sleeveless", "short", "3/4", "long"];
var occasion = ["casual", "party/evening", "work"];
for (var h = filters.length; h--;) {
 console.log(filters[h])
 for (var i = filters[h].length; i--;) {
 console.log(filters[h[i]])
 }
}

I'm used to python, and this seems like it would work as I want, but instead of returning the array items I get an undefined result for filters[h[i]]

What am I doing wrong here? TIA

• Neil Villareal: That is because h is an integer and doing h[i] will return undefined.

Answer 1

You cannot get a reference to a local variable from a string in JavaScript. There is no way to get to the array in colour if all you have is the string "colour".

What you can do is have your filters all in an object ("dictionary" for Python people):

var filters = {
 colour: [
 "black", "white", "blue", "brown", "gold",
 "green", "grey", "multi", "nude", "orange", "pink",
 "purple", "red", "silver", "yellow"
 ],
 size: [
 "XS", "S", "M", "L", "UK 6", "UK 8",
 "UK 10", "UK 12", "UK 14", "UK 16", "UK 18+"
 ],
 len: [
 "maxi", "midi", "mini"
 ],
 s_length: [
 "sleeveless", "short", "3/4", "long"
 ],
 occasion: [
 "casual", "party/evening", "work"
 ]
};

then iterate on that to pick up the various values.

Object.keys(filters).forEach(function(filterName) {
 filters[filterName].forEach(function(option) {
 console.log(option);
 });
});

• Amadan: @NeilVillareal: I think you replied to a wrong person...? I never mentioned h[i]...

Answer 2

filters is an array of strings. When you are doing:

 filters[h[i]]

You are trying to access the property i of the element h of the array filters. As filters is an array of strings, h will point to a string, and i will try to dig into that string. And it will fail to do so (won't find a thing).

Probably you should declare all the other arrays:

 var colour = ...
 var size = ...
 var len = ...

And last do this:

var filters = [colour, size, len, s_length, occasion];

So now filters is an array of arrays, and you can dig into a element of each of those arrays

Answer 3

To achieve the same logic correctly in JavaScript you can do it like this

var filters = ["colour", "size", "len", "s_length", "occasion"];
var variables = {
 colour : ["black", "white", "blue", "brown", "gold",
 "green", "grey", "multi", "nude", "orange", "pink",
 "purple", "red", "silver", "yellow"],
 size : ["XS", "S", "M", "L", "UK 6", "UK 8",
 "UK 10", "UK 12", "UK 14", "UK 16", "UK 18+"],
 len : ["maxi", "midi", "mini"],
 s_length : ["sleeveless", "short", "3/4", "long"],
 occasion : ["casual", "party/evening", "work"],
};
for (var h = filters.length; h--;) {
 console.log(filters[h])
 for (var i = variables[filters[h]].length; i--;) {
 console.log(variables[filters[h]][i])
 }
}

Answer 4

You might want to try this. You can test it here https://jsfiddle.net/Lk9xcex2/.

var filters = ["colour", "size", "len", "s_length", "occasion"];
var colour = ["black", "white", "blue", "brown", "gold",
 "green", "grey", "multi", "nude", "orange", "pink",
 "purple", "red", "silver", "yellow"];
var size = ["XS", "S", "M", "L", "UK 6", "UK 8",
 "UK 10", "UK 12", "UK 14", "UK 16", "UK 18+"];
var len = ["maxi", "midi", "mini"];
var s_length = ["sleeveless", "short", "3/4", "long"];
var occasion = ["casual", "party/evening", "work"];
for (var h = filters.length; h--;) {
 console.log(eval(filters[h]));
}