js Object Array causing function not defined - multidimensional-array

Question

Ok, I'm having a hard time trying to create an object array that I can use within a select box...
Here is the code I have so far:
var oTranslators = {{"bosniancroatianserbian" : null} , {"dutch" : {"name":"willemjan","id":2}} , {"german" : {"name":"chilly","id":11}} , {"german_informal" : {"name":"Boantio","id":1640}} , {"greek" : null} , {"hungarian" : {"name":"Rudi","id":69}} , {"norwegian" : null} , {"russian" : {"name":"Bugo","id":43}} , {"spanish" : {"name":"Diego Andr\u00e9s","id":413}} };
function lang_switch(val)
{
if (val == 1)
document.getElementById("lang").innerHTML = '<select name="lang_name" onchange="trans_switch(this.selectedIndex);"><option value="bosniancroatianserbian">Bosnian/Croatian/Serbian</option><option value="dutch">Dutch</option><option value="german">German</option><option value="german_informal">German Informal</option><option value="greek">Greek</option><option value="hungarian">Hungarian</option><option value="norwegian">Norwegian</option><option value="russian">Russian</option><option value="spanish">Spanish</option></select><label for="translator">Translator: <select name="translator" id="translator"></select></label>';
else
document.getElementById("lang").innerHTML = '';
}
function trans_switch(oBName)
{
document.upload.translator.options.length = 0;
var oBoard = oTranslators[oBName];
for (var i = 0; i < oBoard.length; i++) {
translator.options[translator.options.length] = new Option(oBoard.name, oBoard.id, false, false);
}
}
And the HTML:
<form name="upload" enctype="multipart/form-data" action="http://mydomain.com/myaction.php" method="post" autocomplete="off">
<dl class="settings">
<dt>
<strong>Choose a file to upload:</strong>
</dt>
<dd>
<input type="file" name="dp_file" size="38" class="input_file" />
</dd>
<dt>
<select name="down_area" onchange="lang_switch(this.value);">
<option value="0">Main Download</option>
<option value="1">Language Packs</option>
</select>
</dt>
<dd>
<div id="lang"></div>
</dd>
</dl>
<div style="text-align: right;"><input name="upload" type="submit" value="Upload" class="button_submit" /></div>
</form>
Basically, I am getting error stating that lang_switch is undefined, which is nuts, because it's right there. Is there something wrong with my object array? Did I not define it properly? This is coming from a json_encode, but it is a multidimensional array and I had to fix it a little, so am using this php code to fix it, within a for loop:
$oTrans = '';
$i = 0;
foreach($context['languages'] as $lang => $language)
{
$i++;
$oTrans .= '{"' . $lang . '" : ' . json_encode($language['translator'][$lang]) . '} ' . (count($context['languages']) == $i ? '};' : ', ');
Am I not doing this right? What is wrong with the oTranslators object array above?

Answer 1

The problem you are facing with your code is that while you are trying to make a javascript-array of objects, you are attempting to initialize the array using object-brackets: {.
The result will give you an error, because you cannot initialize an object in the following way:
{{Prop1:val}, {Prop2:val}};
It would need to be the following:
{Prop1:val, Prop2:val};
Therefore, to fix your array, all you need to do is replace the first { and last } with array brackets, [ and ]:
[{"bosniancroatianserbian" : null} , {"dutch" : {"name":"willemjan","id":2}} , {"german" : {"name":"chilly","id":11}} , {"german_informal" : {"name":"Boantio","id":1640}} , {"greek" : null} , {"hungarian" : {"name":"Rudi","id":69}} , {"norwegian" : null} , {"russian" : {"name":"Bugo","id":43}} , {"spanish" : {"name":"Diego Andr\u00e9s","id":413}} ];