Assign values to select box through Ajax call

Question

I am trying to do a ajax call on loading of the page and the value which I will get through this ajax call I would like to assign it as the select box value. But its not working.

GSP CODE:

<select id="${form?.id}" name="${form?.id}" ><option selected="selected">select</option></select>

JAVASCRIPT CODE:

    $(document).ready(function(){

        $.ajax({
           url: "${g.createLink(controller: "landing", action: "getBankKeys")}",
           data: {
                    country: $("#Country").text()
           }, 
       dataType: 'json',
       success: function(json){
       $.each(json, function(i, optionHtml){
              $('#BankKey').append(optionHtml);
           });
                }
            });
        });

GROOVY CODE:

def getBankKeys() {
        def bankKeys = vendorManagementDelegate.getBankKeys(params.country)
        println "Bank Keys +++++++++++++++++++++++++++++++++++++++++++"+bankKeys
        render bankKeys as JSON
    }

I am getting bankKeys through the above println statement as a list like this:

Bank Keys +++++++++++++++++++++++++++++++++++++++++++[0020000, 0020000, 0020001, 0020001, 0020007, 0020007, 0020067, 0020067, 0020149, 0020149, 0020199, 0020199, 0020215, 0020215, 0020218, 0020218, 0020243, 0020243, 0020245, 0020245, 0020255, 0020255, 0020265, 0020265, 0020274, 0020274, 0020278, 0020278, 0020315, 0020315, 0020345, 0020345, 0020348, 0020348, 0020371, 0020371, 0020389, 0020389, 0020505, 0020505, 0020506, 0020506, 0020531, 0020531, 0020557, 0020557, 0020558, 0020558, 0020567, 0020567, 0020588, 0020588, 0020662, 0020662, 0020680, 0020680, 0020681, 0020681, 0020693, 0020693, 0020779, 0020779, 0020870, 0020870, 0020885, 0020885, 0020891, 0020891, 0020922, 0020922, 0020943, 0020943, 0020978, 0020978, 0024006, 0024006, 0024138, 0024138, 0024150, 0024150, 0024152, 0024152, 0024165, 0024165, 0024227, 0024227, 0024291, 0024291, 0024329, 0024329, 0024344, 0024344, 0024350, 0024350, 0024430, 0024430, 0024468, 0024468, 0024618, 0024618, 0024658, 0024658, 0024692, 0024692, 0024730, 0024730, 0030000, 0030000, 0060000, 0060000, 0090000, 0090000, 0120000, 0120000, 0120001, 0120001, 0120002, 0120002, 0120004, 0120004, 0120005, 0120005, 0120006, 0120006, 0120007, 0120007, 0120008, 0120008, 0120009, 0120009, 0120010, 0120010, 0120011, 0120011, 0120012, 0120012, 0140000, 0140000, 0149200, 0149200, 0210000, 0210000, 0720000, 0720000, 123456, 123456, BANAMEX, BANAMEX, BANAMEX11, BANAMEX11, BANAMEX12, BANAMEX12, BANAMEX99, BANAMEX99, GEN01, GEN01, NONE, NONE, TRANSFERENCIA, TRANSFERENCIA]

Answer 1

Get rid of the line:

println "Bank Keys +++++++++++++++++++++++++++++++++++++++++++"+bankKeys

If you're returning JSON, that has to be the only thing in the response. If you put a plain text line before it, Javascript won't be able to parse the JSON.

In the Javascript, you need to create <option> elements for the array elements:

$.each(json, function(i, option) {
    $("#BankKey").append($("<option>", {
        value: option,
        text: option
    }));
});