Working with JSON & PhoneGap Application

I Love to use JSON objects especially when working with PhoneGap Applications. I find it very comforting while transferring data from client to server and vice versa.

I will explain through a simple example how I use JSON to ease the client-server data transmission.

Example will be, a client asking for the details of the Employee working in the Accounts department.

Basic Algo for the Example will be as follows,

  • Client will make an Ajax request, asking for the Details of Employees working in an Accounts Department.
  • On receiving the Request, Server will fetch all the details of the Employees working in Accounts form Database, convert these details to an Json Objects and send back to the Client.
  • Client on Receiving the Response from the server will parse the JSON objects and convert the data in local JS variables and render the data at client side, i.e. in a table grid etc. as per requirements. 
At the client Side, Include the following js files,
  • json2.js 
  • jsonStringify.js
At Server Side, Include the following jar
  • json.jar
Data transferred from client (Phonegap Application) to server (Any jsp/servlet server or web service etc.) will be in the form of an Ajax request, you can make use of any JS library like Jquery, prototype, zepto etc. to make the Ajax request from client, I prefer to use Jquery or Zepto and the syntax use in the following example will be compatible with both i.e. Jquery and Zepto.

Code for the Client side Making an Ajax Request will be as follows, 

function getEmpDetails() {
$.ajax({       
type : 'POST',  
url : <Server URL>,
data : {   
   'DepartmentType': 'Accounts'
},  
dataType:'json',
success : function(data) {       
        },
error : function(xhr, type) { 
}  
}); 
}

Explanation of the Above code, 

The function, getEmpDetails() will make an Ajax request, following are the parameters,
  • type - 'POST', here GET and POST are the two values, I prefer to make POST request.
  • url – this value indicates the server url,  Server could be the Java Servlet, jsp, Web Service etc. 
  • data – this value indicates the request parameters to be sent to the server, here in this example, the name of the department we are sending i.e. 'Accounts'.
  • datatype – this value indicates the data type of the data which will be returned form the server, here the value 'json' indicates that the data sent as the response from the server to client will be in the json format.
  • success – this function will be executed after successfully getting the response from the server, explained in detail in the later section of this example.
  • error – this function will be executed if there is some kind of error in getting the response from the server, this error type may include, some connection error to server, if the data is corrupted or not in the particular format as expected etc.
At the Server Side, 
On Receiving the Request, following snippet of the code shows the server side processing,  Here my Server is the simple Java Servlet, Dont forget to include the json.jar for the same.
I have included the comments in each and every line of the code as an explanation.

// Declare the Response Object type which will be json, as client expects response in json format.
JSONObject responseObj = new JSONObject();
        
//Declare a List of type JSONObject as our data will have multiple employee details working in the Accounts department,

List<JSONObject> employeeDetails = new LinkedList<JSONObject>();

//Reading the Request Parameters, 

String depeartmentType = request.getParameter(“DepartmentType”);

For getting the Employee details, server may need to query the Database, and populate the jsonobjects as follows,

try{

// Directly moving to executing a sample query not including the //connection statements here

ResultSet rs = statement.executeQuery(“select * from employee where department = '”+depeartmentType+”'”);

while (rs.next()){
// here is where the json object is populated as follows,
JSONObject empObj = new JSONObject();
empObj.put("empId", rs.getString(“ID”));      
empObj.put("empName", rs.getString(“NAME”));         
empObj.put("empDateOfJoining", rs.getString(“DOJ”));  
empObj.put("empSalary", rs.getString(“SALARY”));     
// this temp json object added to the employeeDetails List of type //JSONObject.
employeeDetails.add(empObj);

} 

// finally add the populated linked list to the response object
responseObj.put("employeeDetails", employeeDetails);
            

// Get the print writer object and send the above response object //to the Client.
            PrintWriter writer = response.getWriter();
            writer.write(responseObj.toString());
            writer.flush();


}catch(Exception e){
e.printStackTrace();
}



Now On Receiving the Response from the Server, the above method of the Client Side will Change as follows,

function getEmpDetails() {
$.ajax({       
  type : 'POST',  
  url : <Server URL>,
  data : {   
'Department': 'Accounts'
       },  
  dataType:'json',   
          success : function(data) { 
          var empObject = eval('(' + JSON.stringify(data) + ')');            
          var empObjectLen = empObject.employeeDetails.length;
          
          for (var i=0; i<empObjectLen; i++) {     
       
// Get the data in local JS variables
       var empId = empObject.employeeDetails[i].empId;
       var empName = empObject.employeeDetails[i].empName;
       var empDateOfJoining = empObject.employeeDetails[i].empDateOfJoining ;
       var empSalary = empObject.employeeDetails[i].empSalary;
  }            
  },
     error : function(xhr, type) { 
alert('Internal Error Occoured!'); 
}  
}); 
}

Explanation, 
On successfully getting the response from the server,   Response type will be as follows,

{"employeeDetails":[{"empId":"001","empName":"Sam","empDateOfJoining":"2011-07-07","empSalary":"60000"},
{"empId":"002","empName":"Pam","empDateOfJoining":"2010-06-07","empSalary":"40000"},
{"empId":"003","empName":"Dolly","empDateOfJoining":"2010-07-09","empSalary":"80000"},
{"empId":"004","empName":"Dona","empDateOfJoining":"2010-07-07","empSalary":"40000"},
{"empId":"005","empName":"Sam S","empDateOfJoining":"2011-04-08","empSalary":"20000"},
{"empId":"006","empName":"Pam P","empDateOfJoining":"2010-09-07","empSalary":"40000"},
{"empId":"007","empName":"Polla","empDateOfJoining":"2012-01-01","empSalary":"70000"}]}


Appropriate parsing of this response is done in the 'success' function, where whole response is breaked up and finally made available in the local JS variables which can be used further to render the data at client side in the Grid, tables etc. as per user requirements.

I hope this article was useful to the readers.

Comments

Post a Comment

Popular posts from this blog

How to draw an overlay on a SurfaceView used by Camera on Android?

Solution 1: I have a simple program that draws the preview of the Camera into a SurfaceView . What I'm trying to do is using the onPreviewFrame method, which is invoked each time a new frame is drawn into the SurfaceView , in order to execute the invalidate method which is supposed to invoke the onDraw method. In fact, the onDraw method is being invoked, but nothing there is being printed (I guess the camera preview is overwriting the text I'm trying to draw). This is a simplify version of the SurfaceView subclass I have: public class Superficie extends SurfaceView implements SurfaceHolder . Callback { SurfaceHolder mHolder ; public Camera camera ; Superficie ( Context context ) { super ( context ); mHolder = getHolder (); mHolder . addCallback ( this ); mHolder . setType ( SurfaceHolder . SURFACE_TYPE_PUSH_BUFFERS ); } public void surfaceCreated ( final SurfaceHolder holder ) { camera = Camera . open (); try {
Read more

Android TCP Connection Chat application

Image
1. Make the Server in Java To create the server create a new project in Java and make a class called "TCPServer". In this class put the following code: UPDATED 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 import javax.swing.*; import java.io.*; import java.net.ServerSocket; import java.net.Socket;   /**   * The class extends the Thread class so we can receive and send messages at the same time   */ public class TCPServer extends Thread {        public static final int SERVERPO
Read more

Create EditText with dropdown in android

EditText is a view which is used so frequently in Android application,specially in applications which has forms which allow user to fill information of any kind. When you have filled any form you must have a faced an problem (specially on mobile devices) ie. deleting the text written in EditText and prepare editable dropdown which allows to enter manual data with dropdown. So I have created my own custom EditText ie. DropDownEditText.This customized view contains a Button inside the EditText itself. So just on pressing this Button only once you can populate the dropdown with ArrayAdapter. So here my code goes… First XML code for customized view. dropdown_edit_text.xml <?xml version=”1.0″ encoding=”utf-8″?> <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"; android:layout_width=”fill_parent” android:layout_height=”wrap_content” > <EditText android:id=”@+id/dropdown_edit” android:layout_width=”fill_parent” androi
Read more