multi-dimensional associative arrays 1

[factotum]

I have an associative, mulitdimensial array abbreviated here that looks like:

var equations = new Array();
equations["Acre"] = ["Meter\u00b2" , "4.046 * Math.pow(10,3)"];
equations["Joule"] = ["Calorie (thermochemical)", "Electron Volt", "Erg", ".239", "1.8 * Math.pow(10,60)", "Math.pi()"];

I want to use this data and create the select options. However, I'm having difficulty having the "selected" written on the first option because I'm not sure how to let it know it's the first item (since length does not work on associative arrays). I thought of creating a counter of some sort, but don't know how to pull out the first one to do that. I've tried (unsuccessfully) doing something like:

while (j <= (var i in equations)) {;
	if (j = 1) 
	{
		document.write(<option selected=&quot;true&quot;>' + [i] + '</option>');
	}
	else 
	{
	document.write(&quot;<option>&quot; + [i] + &quot;</option>&quot;);
	}
	j++
}

or:

for (var i in equations)
	if ([i]==0) {document.write('<option selected=&quot;true&quot;>' + [i] + '</option>');}
	else {document.write(&quot;<option>&quot; + [i] + &quot;</option>&quot;);}

Is there a JS guru that understands how to accomplish this? Can it be done? Or do I have to scrap the associative arrays (choosen for a couple of reasons) and just go with an indexed array.

Thanks a million,
-f

 

[FesterSXS]

the syntax for selecting a list item is:

<option value=&quot;your_value&quot; selected>your_choice</option>

Tony

http://www.phoenix-paints.co.uk/portfolio

 

[factotum]

Unless you're writing XHTML, where you must adhere to the XML standards; XML does not support attribute minimization.

 

[jemminger]

factotum,

something like this?

<script name=&quot;javascript&quot;>
var equations = new Array();
equations[&quot;Acre&quot;] = [&quot;Meter\u00b2&quot; , &quot;4.046 * Math.pow(10,3)&quot;];
equations[&quot;Joule&quot;] = [&quot;Calorie (thermochemical)&quot;, &quot;Electron Volt&quot;, &quot;Erg&quot;, &quot;.239&quot;, &quot;1.8 * Math.pow(10,60)&quot;, &quot;Math.pi()&quot;];

for (el in equations) {
	document.writeln('<select name=&quot;' + el + '&quot;>');
	document.writeln('<option>' + el + '</option>');
	for (idx = 0; idx < equations[el].length; idx++) {
		sel = (idx == 0)?' selected=&quot;true&quot;':'';
		document.writeln('<option' + sel + '>' + equations[el][idx] + '</option>');
	}
	document.writeln('</select><p />');
}
</script>

================================================================================ ======================================

if (!succeed) try();
-jeff

 

[factotum]

Doesn't work. It's creating a pulldown with all the elements of the nested array, instead of just the name of the associative array.

Also, from your code, I removed the "select" stuff, because that already exists. To more clearly see what I'm doing, you can check out:

http://www.ionize.net/laboratory/converter2.html

And can you explain in simple terms what this is doing from your code:

sel = (idx == 0)?' selected="true"':'';

Thanks,
-f

 

[jemminger]

OK...so you want to select the name of the associative array in the first list, and have the second populated with the appropriate elements?

this code:
sel = (idx == 0)?' selected="true"':'';

is called a ternary operator - basically just shorthand for:

if (idx ==0)
sel = ' selected="true"';
else
sel = '';



======================================

if (!succeed) try();
-jeff

 

[factotum]

Yes. That's exactly what I'm trying to do! But I can't figure out how to get that first option selected.

If you slect one of the associative array's names in the first, that function works. But everything is getting thrown into that first pulldown.

Reason I want to ensure that I have one selected is that I want valid stuff spit out, as well as the restoreDefault() method requires it.

Thanks for the explanation of the ternary object. I'm not very good at JS (this being my first foray into heavy array use). Though, I am quite proud of my solution of hiding the equations in the second half.

Thanks,
-f

 

[jemminger]

here's how I would handle it:

<html>
<head>
<title>multi-dimensional associative arrays</title>

<script name=&quot;javascript&quot;>
var equations = new Array();
equations[&quot;Acre&quot;] = [&quot;Meter\u00b2&quot; , &quot;4.046 * Math.pow(10,3)&quot;];
equations[&quot;Joule&quot;] = [&quot;Calorie (thermochemical)&quot;, &quot;Electron Volt&quot;, &quot;Erg&quot;, &quot;.239&quot;, &quot;1.8 * Math.pow(10,60)&quot;, &quot;Math.pi()&quot;];

function init() {
	var df = document.forms[0];
	var count = 0;
	for (el in equations)
		df.title.options[count++] = new Option(el);
	doList(df.title.options[df.title.selectedIndex].text);
}

function doList(sTitle) {
	var df = document.forms[0];

	for (idx = df.elements.length; idx > 0; idx--) {
		df.elements.options[idx] = null;
	}
	for (idx = 0; idx < equations[sTitle].length; idx++) {
		df.elements[idx] = new Option(equations[sTitle][idx]);
	}
}
</script>

<style type=&quot;text/css&quot;>
</style>

<meta name=&quot;author&quot; content=&quot;?&quot;>
<meta name=&quot;keywords&quot; content=&quot;?&quot;>
<meta name=&quot;description&quot; content=&quot;?&quot;>
</head>

<body onload=&quot;init();&quot;>
<form name=&quot;&quot; action=&quot;&quot; method=&quot;&quot;>
<select name=&quot;title&quot; onchange=&quot;doList(this.options[this.selectedIndex].text);&quot;></select>
<select name=&quot;elements&quot;></select>
</form>
</body>
</html>

it's pretty much what you have already...I use a function init() to populate the first list rather than having to hard-code all those options in HTML.

hope this helps!
======================================

if (!succeed) try();
-jeff

 

[factotum]

Alright! It worked. You can check it out at

http://www.ionize.net/laboratory/converter2a.html

The only changes I made to your code was naming conventions-- and I had to divide your second idx counter by 2 in doList(), so that I can store the equations (hidden) in the second half of the array.

Thanks a bunch for your help. This is great code you came up with, and I enjoy looking through your work. Thanks for sharing. I worked very hard to make this as small of a page as possible (by sharing data as much as possible). You actually make it smaller.

Of course, now I have to add the computational part

=Daniel

 

[factotum]

Actually, I'm no longer setting an option to be 'selected.' There is also no way I know of to test this. While the restoreDefault() method is gone, and I no longer need the 'selected' attribute to reset the form, I don't have something selected in the beginning. Is this bad coding?

Any help... suggestions?

Thanks.