title: How to populate dropdownlist with JSON data as ajax response in jQuery
body: <p>I am working on a j2ee application. In my application I have a drop-down list(or Select element). I want to populate this drop-down list with JSON data as a Ajax response.</p>
  
  <p>Below is the code what I have:</p>
  
  <p><strong>Server side Code (json_source.java) which generates a JSON response. :</strong></p>
  
  <pre><code>package demo.model;
  
  import java.io.IOException;
  import java.sql.Connection;
  import java.sql.DriverManager;
  import java.sql.ResultSet;
  import java.sql.Statement;
  
  import javax.servlet.ServletException;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  
  import com.google.gson.*;
  
  /**
   * Servlet implementation class json_source
   */
  public class json_source extends HttpServlet {
  private static final long serialVersionUID = 1L;
  
  
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
  {
      JsonArray data_json=new JsonArray();
  
      Statement st_loginId=null;
      ResultSet rs_loginId=null;
      try
      {
          Connection con=null;
  
          Class.forName("oracle.jdbc.OracleDriver");
  
          /* Connection String for "OPERWH"(exadata) Database */
          con=DriverManager.getConnection("jdbc:oracle:thin:*************","*****","*****");
  
          con.setAutoCommit(true);
  
          st_loginId=con.createStatement();
          rs_loginId=st_loginId.executeQuery("select login_id \"LOGIN ID\" from user_access");
          //System.out.println("entered in frame_login_code"); 
          int login_val=0;
          JsonObject json_response=new JsonObject();
  
          while(rs_loginId.next())
          {   
              login_val++;
              JsonObject json=new JsonObject();
              json.addProperty("value", "login"+login_val);
              json.addProperty("text", rs_loginId.getString(1));
              data_json.add(json);
          }
          System.out.println(data_json);
          json_response.add("aaData", data_json);
  
          response.setContentType("application/Json");
  
          response.getWriter().write(json_response.toString());
  
          System.out.println(json_response);
      }
      catch(Exception ex)
      {   
          System.out.println("Exception occured during retrieval of Login_Id in ComboBox :"+ex);
          ex.printStackTrace();
      }
  }
  
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      // TODO Auto-generated method stub
  }
  
  }
  </code></pre>
  
  <p><strong>and the JSON data which successfully generated through above server side code :</strong></p>
  
  <pre><code>{
      "aaData": [{
          "value": "login1",
          "text": "kapils"
      }, {
          "value": "login2",
          "text": "davidn"
      }, {
          "value": "login3",
          "text": "alanp"
      }]
  }
  </code></pre>
  
  <p><strong>and Below is my Client side code (source1.jsp) which generate ajax request:</strong></p>
  
  <p><strong>(Using $.ajax() ) :</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() 
  { 
  $('#id_trial').click(function() {
  
      alert("entered in trial button code");
  
      $.ajax({
          type: "GET",
          url:"/demo_trial_application/json_source",
          dataType: "json",
          success: function (data) {
              $.each(data.aaData,function(i,data)
              {
               alert(data.value+":"+data.text);
               var div_data="&lt;option value="+data.value+"&gt;"+data.text+"&lt;/option&gt;";
              alert(div_data);
              $(div_data).appendTo('#ch_user1'); 
              });  
              }
        });
      });
  });
  
  &lt;/script&gt;
  
  &lt;body&gt;
  
  &lt;div id="div_source1"&gt;
      &lt;select id="ch_user1" &gt;
          &lt;option value="select"&gt;&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;input type="button" id="id_trial" name="btn_trial" value="Trial Button.."&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>OR Using ($.getJSON()) :</strong></p>
  
  <pre><code>$.getJSON("/demo_trial_application/json_source", function (data) {
      $.each(data.aaData, function (i, data) {
          var div_data = "&lt;option value=" + data.value + "&gt;" + data.text + "&lt;/option&gt;";
          alert(div_data);
          $(div_data).appendTo('#ch_user1');
  
      });
  });
  </code></pre>
  
  <p>Now when I clicked on button (#id_trial), the server side code executes successfully and as a result JSON object created. <strong>but i am not getting that "JSON response" in callback function of Success parameter using jQuery's ajax call.</strong></p>
  
  <p><strong>and apart from jQuery's ajax call I also tried with <code>$.getJSON</code> function to receive JSON response..but I didn't get JSON data.</strong></p>
  
  <p><strong>So please tell me if there is any mistake in my code, and how to get JSON data using above code and populate drop-down list.</strong></p>
  
  <p><em>I want to populate my dropdownlist with JSON data using ajax response.</em>
  please help me to sort out this problem...its very urgent for my application.</p>