iterating through java collection using jQuery

Question

I am starting with this object,

public class myTO {

    private String id;
    private String name;
    }

Which is used in this object

public myCombiTO {
    private myTO myTO;

    private List<String> valueList;
    private List<String> displayList;
}

I create a list of these objects

List<myCombiTO> myCombiTOList = getMyCombiTOList();

I use this list to set a jsp page attribute

request.setAttribute("myAttrList", myCombiTOList);

And forward to the jsp page. I then use jquery and jstl to populate a drop down from this list

<select name="mYSelect" id="mySelect">
     <c:forEach var="myVar" items="${myAttrList}">
          <option value="${myVar.myTO.id}" >
               <c:out value="${myVar.myTO.name}" />
          </option>
    </c:forEach>    
</select>

My problem is I want to populate a second drop down using jquery with the values from mycombiTO.getValueList(). so far I have this

$("#mySelect").change(function(){
        var myJSList = ${myAttrList};
        var chosenGroup = $("#mySelect").val();
        var valueArray = myJSList.get(chosenGroup).valueList;
        var displayArray = myJSList.get(chosenGroup).displayList;
        var items = {'display':[displayArray], 'value':[valueArray]};

        //now populate drop downs

        $.populateSelect($('#myselect').get(0), items);

    });

jQuery.populateSelect = function(element,items) {
    $.each(items, function() {
            element.options[element.options.length]  = new Option(this.display,this.value);
          });
};

However its not working please help. I am having trouble creating the javascript object based on two arrays. Hwoever ideally I would want to reference a java map from jquery using key/value pairs. Is this possible ?

Thanks in advance.

Related: http://stackoverflow.com/questions/2263996/populating-child-dropdownlists-in-jsp-servlet — BalusC, Jul 05 '10 at 13:49

user113716 · Accepted Answer · 2010-07-05T13:43:30.653

1

Right now you're passing in items which is an object with only two key/value pairs, so the $.each() is running for only two iterations. And for those iterations, this.display and this.value refer to the entire arrays.

One option would be to simply pass the displayArray and valueArray in to the populateSelect(), and iterate over those:

jQuery.populateSelect = function(element,displayArray,valueArray) {
    $.each(displayArray, function(i,val) {
        element.options[element.options.length]  = new Option( displayArray[i] ,valueArray[i] );
    });
};

Going back to your original code, you could also do this:

jQuery.populateSelect = function(element,items) {
    $.each(items.display, function(i,val) {
        element.options[element.options.length]  = new Option( items.display[i] ,items.value[i] );
    });
};

edited Jul 05 '10 at 13:43

answered Jul 05 '10 at 12:54

user113716

318,772
63
451
440

Yeah OK thanks; I was hoping for a mechanism to just use the one datastructure for displayArray and valueArray ... ? – NimChimpsky Jul 05 '10 at 13:16
@batthink - Sure. You could go back to your original code, and iterate over `items.display` instead of `items`. I'll update my answer with that. Another solution would be to create an array of objects, and iterate over that array instead of creating an object with the arrays inside. – user113716 Jul 05 '10 at 13:41

score 1 · Answer 2 · answered Jul 05 '10 at 13:59

1

I think your java code should provide a json version of your objects. You could then either insert the whole myCombiTOList in your jsp, or get a single myCombiTO object with an ajax request in the change function.

answered Jul 05 '10 at 13:59

Maurice Perry

32,610
9
70
97

iterating through java collection using jQuery

2 Answers2