Rose18
Rose18

Reputation: 3162

ExtJs 3.4 : Retrieve data from Ajax response

I am using ExtJs 3.4 and I have a combo box. When user select a value from this combo, Ajax request will be called to retrieve data from my postgresql database according to the selected value.

listeners : {
            select : function() {
                var selVehicleCode = Ext.getCmp('vehicleCombo').getValue();
                var selFromDate = Ext.getCmp('fromDateCombo').getValue();

                Ext.Ajax.request({
                      method: 'GET',
                      loadMask: true,
                      scope: this,
                      url: "http://" + host + ":" + port + "/" + projectName + "/"
                            + "SetDefaultValues",
                      success: function (response, request) {
                        Ext.MessageBox.alert('success', response.responseText);

                      },
                      failure: function (response, request) {
                        Ext.MessageBox.alert('failure', response.responseText);
                      },
                      params : {
                        selectedVCode : selVehicleCode,
                        selectedFromDate : selFromDate.format('Y-m-d')
                      }
                 });

            }

        }

And this is my SetDefaultValues.java servlet.

//imports
public class SetDefaultValues extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public SetDefaultValues() {
    super();
    // TODO Auto-generated constructor stub
}

@Override
public void init() throws ServletException {
    // TODO Auto-generated method stub
    super.init();
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
 *      response)
 */
protected void doGet(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    processRequest(request, response);
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
 *      response)
 */
protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    processRequest(request, response);
}

protected void processRequest(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();

    ServletContext context = getServletContext();

    String dbName = context.getInitParameter("ConnectionDB");
    String connectionHost = context.getInitParameter("ConnectionHost");
    String connectionUser = context.getInitParameter("ConnectionUser");
    String connectionPassword = context
            .getInitParameter("ConnectionPassword");
    String port = "5433";

    Statement statement = null;
    ResultSet defaultSet = null;
    Connection pgConnection = null;
    // String lineString = "";

    try {
        pgConnection = ConnectionManager.getPostgresConnection(
                connectionHost, connectionUser, connectionPassword, dbName,
                port);
        // out.println(connectionHost+","+ connectionUser+","+
        // connectionPassword+","+ dbName);
        statement = pgConnection.createStatement();
        // out.print(pgConnection);

        String vCode = request.getParameter("selectedVCode");
        String fromDate = request.getParameter("selectedFromDate");
        // out.print(fromDate);
        // out.print(vCode);

        String sql = "";

        sql += "SELECT v.vehiclecode, v.employeecode, e.name, e.employeecategory";
        sql += " FROM hoobtvehcileemplyees v, hoobtemplyees e";
        sql += " WHERE v.employeecode = e.employeecode AND";
        sql += " v.vehiclecode = " + vCode + " AND v.datefrom < '" + fromDate + "' AND v.dateto > '" + fromDate + "'";

        defaultSet = statement.executeQuery(sql);

        String jsonData = "{'defaultVal':[";

        while (defaultSet.next()) {
            jsonData += "{ 'category' : '";
            jsonData += defaultSet.getString(4).trim();
            jsonData += "', ";
            jsonData += "'name' : '";
            jsonData += defaultSet.getString(3).trim();

            if (defaultSet.isLast()) {
                jsonData += "' }  ";
            } else {
                jsonData += "' } , ";
            }
        }

        jsonData += "]}";
        out.print(jsonData);

    } catch (Exception e) {
        // TODO Auto-generated catch block
        out.println(e.toString());
        e.printStackTrace();

    }

}

}

And here is my Ajax response.

{'defaultVal':[{ 'category' : '1', 'name' : 'Kamal Subhasingha' } , { 'category' : '2', 'name' : 'Namal Witharana' } , { 'category' : '3', 'name' : 'Yohan' } , { 'category' : '4', 'name' : 'Ahan Liyanage' } , { 'category' : '5', 'name' : 'Sampath Jayaweera' } , { 'category' : '6', 'name' : 'Saman' } ]}

Now I need to retrieve name field with respect to category 3 and category 5. And I should set those values as my combo box values (I have two combo boxes). I've tried following.

var jsonData = Ext.util.JSON.decode(response.responseText);
console.log(jsonData);
alert(jsonData.name);

It prints jsonData. But it gives an alert with undefined.

What's wrong with my codes? Anyone has an idea ?

I would be much obliged if anyone please be so kind enough to explain what's going wrong with my codes and how should I do such a thing.

Thank you

Upvotes: 0

Views: 1958

Answers (1)

Andrew Koshkin
Andrew Koshkin

Reputation: 481

You forgot about defaultVal parameter which contains other objects.

console.log(jsonData.defaultVal);

Than you can get access to 'name' property

Upvotes: 1

Related Questions