How to dynamically update drop-down list options with values in a server-generated array

Question

I have a web form with two drop-down boxes, and I'm looking for a way to dynamically update the options of the second box based on selections from the first.

The first box represents a data type, and the second box is a list of databases associated with the selected type.

I have the basic code running smoothly here:

var TypeA_DbSuffixList = ['Test1', 'Test2', 'Test3'];
var TypeB_DbSuffixList = ['TestA', 'TestB', 'TestC'];

function fill_dbSuffixList(){

   document.getElementById("dbSuffixList").options.length = 0;
   var suffixMenu = document.getElementById("dbSuffixList");
   var dataFormat = document.getElementById("dataFormatType");
   var suffixList = dataFormat.value + "dbSuffixList";

   if (suffixList == 'TypeA_dbSuffixList') {
      for(index in TypeA_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeA_dbSuffixList[index], index);
      }
   }

   if (suffixList == 'TypeB_dbSuffixList') {
      for(index in TypeB_dbSuffixList) {
        suffixMenu.options[suffixMenu.options.length] = new Option(TypeB_dbSuffixList[index], index);
      }
   } 
}

That code (activated whenever a selection is made in the dataType box) clears the existing list of options and repopulates the list based on the selected value of the "dataFormatType" box.

The problem that I face is that the actual lists of database tables are not hard coded and are instead generated with the following calls to the server to avoid repetitive editing of the page every time a new database is added:

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};
var TypeB_dbSuffixList = ${TypeB_dbSuffixList};

These calls return the following code:

var TypeA_dbSuffixList = [Test1, Test2, Test3];
var TypeB_dbSuffixList = [TestA, TestB, TestC];

With the above code, the initial function treats each entry in the type arrays as an undefined variable, and nothing is ever written to the drop-down list.

If I were to add

var Test1 = "Apple";
var Test2 = "Orange";
var Test3 = "Grape";

prior to the "for" loop for TypeA, then selecting TypeA from the dataType drop-down list returns "Apple", "Orange", and "Grape" as the available databases for TypeA.

Visually, I see what needs to be changed. The [Test1, Test2, Test3] returns need to be ['Test1', 'Test2', 'Test3']. I'm just unsure exactly how to go about changing it, and have exhausted every web search I can think of.

Is there a way to either change the format of the returned arrays, or use the existing format and pass variable names as drop-down selections instead of using variable values?

Any help is greatly appreciated. I will continue to search for an answer on my own as well and will post it here should I find one.

Ruan Mendes · Answer 1 · 2012-02-14T17:45:02.583

0

I think the best way to convert data in a server side language into something to be used in JavaScript is to JSON encode your objects.

I'm not sure what language your using on the server, but in PHP you can do the following

var arr = <?php echo json_encode( array ('abc', 'def', 'ghi') ); ?> ;

And your output will be

var arr = ['abc', 'def', 'ghi'] ;

This will make sure that strings with embedded new lines, tabs, quotes are properly escaped.

JSP

You said you're using JSP but the code you have looks more like velocity or free marker inside JSP. In JSP you could use the following, provided you download Gson

var TypeA_dbSuffixList = <%= new Gson().toJson(TypeA_dbSuffixList) %>;

edited Feb 14 '12 at 17:45

answered Feb 13 '12 at 22:31

Ruan Mendes

90,375
31
153
217

Sorry, I failed to mention that the site is running JSP. I'll keep this in mind though should I ever find myself faced with a similar setup in PHP. Thanks – Mike Feb 14 '12 at 15:06
@Mike: Not that hard to do it an JSP http://stackoverflow.com/questions/3207092/what-is-the-jsp-equivalent-to-json-encode-in-php The JSON encoding solution is foolproof, the answer you marked as correct is soooo inelegant: the list becomes comma separated by calling toString(), puts quotes around it, calls the split method and removes all white space, ugh. It also doesn't handle embedded quotes, so it would fail in that case. – Ruan Mendes Feb 14 '12 at 17:40
I think the Web app uses free marker. It's running out of Spring Batch, and I see free marker appear frequently in the documentation. Truthfully I'm in a bit of a "learn as you go" environment, so I'm hacking together functionality and improving it when I learn something new. Due to the setup of the system, I doubt we'll ever see imbedded quotes in this return, but in the spirit of "never say never" I'll definitely be taking a look at your suggestion. – Mike Feb 15 '12 at 15:34

score 0 · Accepted Answer · answered Feb 13 '12 at 22:47

I think the cleanest solution would be to change the code on the server-side to generate a proper JavaScript array of Strings, with the values enclosed in single or double quotes.

If that's not possible for some reason, and you want a pure-JavaScript solution, then I suggest you wrap the entire JSP/ASP/PHP variable (not sure what framework you're using) in double quotes, strip the string of brackets and spaces using a regex, and then split it into a string array using the comma as a delimiter.

So in your JavaScript, this:

var TypeA_dbSuffixList = ${TypeA_dbSuffixList};

would become this:

var TypeA_dbSuffixList = "${TypeA_dbSuffixList}".replace(/[\[\]\s]/g,"").split(",");

Changing the server-side code isn't entirely out of the question, but that code generates hash sets used by other pieces of the app (Not entirely sure whether that was the cause of the format). I suppose I could add another method to return a string array, but I was hoping to capitalize on the code that already exists. This works quite well. Thank you. — Mike, Feb 14 '12 at 15:03

How to dynamically update drop-down list options with values in a server-generated array

2 Answers2