title: Populate listbox options with result of an ajax call using query in spring mvc environment.
body: <p>Currently I am working on my first jquery/ajax call and I'm having issues with how to populate the server side results into my listbox. The spring controller returns me the data correctly (hopefully) i just have issues with the jquery part with filling the listbox. </p>
  
  <p><strong>Here is my ajax call</strong></p>
  
  <pre><code>    $(function() {
       $projectKey = $('#projectKey');
  
      $projectKey.change (
          function() {
              $.ajax({
                  type: "GET",
                  url: "getVersionsByProjectKey",
                  data: {"projectKey": $projectKey.val() },
                  dataType: 'json',
                  success: function(data){
                       alert('success');
                       alert(data);
                       $('#jiraVersion').append(
                               $('&lt;option&gt;&lt;/option&gt;').html(data)
                           );
                  }
              });
          }
      );
  });
  </code></pre>
  
  <p>This is how my <strong>Controller</strong> look like:</p>
  
  <pre><code>@RequestMapping(value="/getVersionsByProjectKey", method = RequestMethod.GET)
    public @ResponseBody List&lt;String&gt; getVersionsByProjectKey(@RequestParam(value = "projectKey") String projectKey) {  
  
          List&lt;String&gt; versions = new ArrayList&lt;String&gt;();
          versions.add("Chuck");
          versions.add("Norris");
          versions.add("John");
          versions.add("Doe");
  
          return versions;  
      }
  </code></pre>
  
  <p>This is the listbox that I want to fill the data in:</p>
  
  <pre><code>&lt;td&gt;
  &lt;form:select path="jiraVersion" id="jiraVersion"&gt;
  
  &lt;/form:select&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>As I said before, I am just familiarizing myself with the jquery now and tried a couple of solutions from google but no joy. I tried:</p>
  
  <pre><code>success: function(data){
           alert('success');
           alert(data);
           $.each(data, function(index, item) {
           $("#jiraVersion").get(0).options[$("#jiraVersion").get(0).options.length] =    
           new Option(item.Display, item.Value);
         });}
  </code></pre>
  
  <p>etc etc. </p>
  
  <p>The alert('success') writes me: <code>Chuck,Norris,John,Doe</code>. </p>
  
  <p>If I send directly the request <code>/getVersionsByProjectKey?projectKey=AIL</code> </p>
  
  <p>i am getting back <code>["Chuck","Norris","John","Doe"]</code></p>
  
  <p>And I also tried to modify the <code>success</code> to have:</p>
  
  <pre><code>success: function(data){
       alert('success');
       alert(data);
       $('#jiraVersion').append(
          $('&lt;option&gt;&lt;/option&gt;').html(data)
       );
  
   }
  </code></pre>
  
  <p>Then my listbox contains just one option which is <em>ChuckNorrisJohnDoe</em> . Any idea what I am doing wrong? </p>