Binding java.util.List with drop-down using Javascript

Question

I need to bind a java.util.List<String> to a HTML drop-down javascript.

I am able to get the java.util.List in the below format:

[Name1,Name2,Name3]

For binding I will use this code (it works fine):

var opt = document.createElement("OPTION");                 
opt.text = xhr.responseText;
opt.value = xhr.responseText;
document.getElementById("slctFullName").options.add(opt);

But I don't know the easiest approach to iterate through these elements.

Please let me know how to iterate through the elements :(

Thanks,

What technologies are you using? JSP, Freemarker? If you're passing data directly into the stream consider JSON. — Boris the Spider, Feb 16 '13 at 13:32
yes. JSP, servlet and javascript. For sending the request in servlet, I use xmlHttpRequest. In servlet, I am creating the list and sending the list using: resp.getWriter().print(nameList); I am able to retrieve the list in the format I mentioned in the above post, but not able to iterate through it properly. Please let me know if you want me to post some more of the code. — WhoAmI, Feb 16 '13 at 13:37
You need to send valid JSON over the wire, so something like `["Name1", "Name2", "Name3]` (notice the quotes), you can then [parse then JSON](http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript) and you have a javascript array. — Boris the Spider, Feb 16 '13 at 13:49
Ok, I did a quick change to get the same in JSON like: `{"Name1":"Name1","Name2":"Name2","Name3":"Name3"}`. I am able to get this in javascript. Now tell how to bind this JSON with the drop-down in javascript. I used `Gson` in java servlet to generate this JSon. Thanks, — WhoAmI, Feb 16 '13 at 13:52
So, now you need to parse that to a javascript object as per the link and then loop over it as in [here](http://stackoverflow.com/questions/684672/loop-through-javascript-object) and build your options... — Boris the Spider, Feb 16 '13 at 14:12
thanks...it works...please post a cumulative answer for the same so that I can close of the thread. — WhoAmI, Feb 16 '13 at 15:12

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

You first need to get the List into a javascript-friendly format, I would suggest:

["Name1", "Name2", "Name3"]

This represents a javascript array in JSON, now you should be able to assign what to a javascript object by parsing it

var arr = JSON.parse(xhr.responseText);

Now you can loop over it like a normal array:

for (var i=0; i<arr.length; ++i) {
 var opt = document.createElement("OPTION");                 
 opt.text = arr[i];
 opt.value = arr[i];
 document.getElementById("slctFullName").options.add(opt); 
}

Note the compatability caveats in here.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 16 '13 at 14:18

Boris the Spider

59,842
6
106
166

`var arr = JSON.parse(xhr.responseText);` is not working in IE. Getting a javascript error: `JSON` is undefined. Please let me know how to make this work in IE :( – WhoAmI Feb 17 '13 at 03:03
Check the [link](http://stackoverflow.com/questions/4935632/how-to-parse-json-in-javascript). You can use [eval](http://www.w3schools.com/jsref/jsref_eval.ASP) but it's not too safe... – Boris the Spider Feb 17 '13 at 03:10

Binding java.util.List with drop-down using Javascript

1 Answers1