PDA

View Full Version : Accessing Array from variable



dan9933
05-11-2014, 10:08 PM
So I have a function that comes out with a variable lets say for example the variable carMaker value is "ford"

If I have an array of the name ford[n] with the models of car ford makes.

How do I access the value of the array from within the function.


var ford = ["mustang", "crownvic", "gt"];

var maker = "ford";

alert (window["maker"+"[1]"]);

gets me a blank. how do I get it to access one of the variables inside the array?

Thanks

Arbitrator
05-12-2014, 12:35 AM
How do I access the value of the array from within the function.


var ford = ["mustang", "crownvic", "gt"];

var maker = "ford";

alert (window["maker"+"[1]"]);

gets me a blank. how do I get it to access one of the variables inside the array?Associate the array with an object via a property name. Then, use bracket notation to access the array by property name. I assume you're trying to do something like this:


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
</head>
<body>
<script>
(function () {
"use strict";
var make = "ford";
window.chevy = ["Camaro", "Impala", "Spark"];
window.ford = ["Crown Victoria", "GT", "Mustang"];
console.log(window[make][1]); // "GT"
make = "chevy";
console.log(window[make][1]); // "Impala"
})();
</script>
</body>
</html>

This associates the array with the global object (window) though. A better approach is to create a standalone object:


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
</head>
<body>
<script>
(function () {
"use strict";
var models = Object.create(null);
var make = "ford";
Object.defineProperty(models, "chevy", { value: ["Camaro", "Impala", "Spark"]});
Object.defineProperty(models, "ford", { value: ["Crown Victoria", "GT", "Mustang"]});
console.log(models[make][1]); // "GT"
make = "chevy";
console.log(models[make][1]); // "Impala"
})();
</script>
</body>
</html>

Or, if you prefer the old school, less powerful syntax for creating objects:


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Template</title>
</head>
<body>
<script>
(function () {
"use strict";
var models = {};
var make = "ford";
models.chevy = ["Camaro", "Impala", "Spark"];
models.ford = ["Crown Victoria", "GT", "Mustang"];
console.log(models[make][1]); // "GT"
make = "chevy";
console.log(models[make][1]); // "Impala"
})();
</script>
</body>
</html>

dan9933
05-12-2014, 01:14 AM
Thanks, that was very useful.

skydoggie77
05-12-2014, 02:09 AM
Or, you could do this -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Popular Cars | Makes and Models</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type=text/javascript>
/* <![CDATA[ */
var maker = ["ford","chevy"];
var ford = ["mustang", "crownvic", "gt"];
var chevy = ["Camaro", "Impala", "Spark"];
/*alert("The Maker is " + maker[0] + " and the Model is " + ford[1] + ".");*/
function carModels(model) {
if(model=="Ford") {
document.write("Ford Model List" + "<hr />");
for(var i=0; i<ford.length; i++) {
document.write(ford[i] + "<br />");
}
}
else {
document.write("Chevy Model List" + "<hr />");
for(var i=0; i<chevy.length; i++) {
document.write(chevy[i] + "<br />");
}
}
}
/* ]]> */
</script>
</head>
<body>
<form name="models id="models" action="">
<p>Click a button for the most popular models!</p><hr />
<p><input type="button" value="Ford"
onclick="carModels(this.value);" />
<input type="button" value="Chevy"
onclick="carModels(this.value);"/></p>
</form>
</body>
</html>

arbitrators' solution is a bit more complicated to understand but is a better solution.

This is simple and something you'll use over and over again.

skydoggie77
05-12-2014, 02:12 AM
This will read better. Must have forgot the code tags.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Popular Cars | Makes and Models</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type=text/javascript>
/* <![CDATA[ */
var maker = ["ford","chevy"];
var ford = ["mustang", "crownvic", "gt"];
var chevy = ["Camaro", "Impala", "Spark"];
/*alert("The Maker is " + maker[0] + " and the Model is " + ford[1] + ".");*/
function carModels(model) {
if(model=="Ford") {
document.write("Ford Model List" + "<hr />");
for(var i=0; i<ford.length; i++) {
document.write(ford[i] + "<br />");
}
}
else {
document.write("Chevy Model List" + "<hr />");
for(var i=0; i<chevy.length; i++) {
document.write(chevy[i] + "<br />");
}
}
}
/* ]]> */
</script>
</head>
<body>
<form name="models id="models" action="">
<p>Click a button for the most popular models!</p><hr />
<p><input type="button" value="Ford"
onclick="carModels(this.value);" />
<input type="button" value="Chevy"
onclick="carModels(this.value);"/></p>
</form>
</body>
</html>

Arbitrator
05-12-2014, 03:05 AM
This will read better. Must have forgot the code tags.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Popular Cars | Makes and Models</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />Never use ISO-8859-1; always use UTF-8, which has no restrictions on which characters can be used.

I'd also use XHTML5 code. Use <!DOCTYPE html> for the document type declaration (or omit it altogether). And use <meta charset="utf-8"> instead of the version of the element you're using now.