Question

I am making a simple html servlet program where I need get JSON object from the servlet, and in html I am able to get the data, but how can i refer to each attribute?

Here is the servlet get method

    PrintWriter out=response.getWriter();
    StringBuffer emps = new StringBuffer("{employees:[");
    emps.append("{fullname:\"Abhishek Raj Simon\"},{email:\"[e-mail]\"}]");
    emps.append("}");
    out.println(emps);

JS to send

function getJson()
{
 var url_action="/temp/jsontest";
 var form=document.forms["mainForm"];
 var splitOutput;
 var client; 
 var dataString;

 if (window.XMLHttpRequest){ 
     client=new XMLHttpRequest();
 } else {
     client=new ActiveXObject("Microsoft.XMLHTTP");
 }

 client.onreadystatechange=function(){
     if(client.readyState==4&&client.status==200)
     {
        var res=client.responseText;
        alert(res);     
        alert(client.responseText.employees.fullname); //DOES NOT WORK
        alert(client.responseText.employees.email); //DOES NOT WORK     
     }
 };

 client.open("GET",url_action,true);
 client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 client.send();

and a simple form

<form>
    <input type="button" value="get me some json" onclick="getJson();">
</form>

When i click on the button, i get only 1 alert displaying
{employees:[{fullname:"Abhishek Raj Simon"},{email:"[e-mail]"}]} How can i fetch Abhishek Raj Simon and [e-mail] using fullname and email respectively?

Edited after reading post from Artem

my servlet

    Gson gson = new Gson( );
    List<Employee> employees = new ArrayList<Employee>();
    Employee emp=new Employee();
    emp.setFullname("Abhishek Raj Simon");
    emp.setEmail("[e-mail]");
    employees.add(emp);
    response.setContentType( "application/json");
    out.println( gson.toJson( employees));

js part

var res=eval('(' + client.responseText + ')');
        alert(res);     
        alert(res.employees.fullname);
        alert(res.employees.email);

Answer 1

I think you should slightly change the JSON that you send form the servlet: {employees:[{fullname:"Abhishek Raj Simon", email:"[e-mail]"}]} would work a bit better in that context.

I’d recommend jQuery as pap has also advised. The code would be:

$.getJSON('/temp/jsontest', function(data) {
   var items = [];
   for (employee in data.employees) {
       items.push(employee.fullname + '<' + employee.email + '>');
   }
   alert('Employees: ' + items.join(', '));
});

In my opinion it is lot simpler and easier to understand than dealing with raw XHR. The jQuery $.getJSON will do GET for you, and then evaluate the JSON response so the function is presented with nice JSON representation of your data that is easy to manipulate.

EDIT:

After interesting discussion here is some more improvement you could introduce in order to replace the low-level code with proper JQuery-based implementation.

<script>
  $(document).ready(function() {
    $("#json-button").click(function() {
      $.getJSON('/temp/jsontest', function(data) {
        var items = [];
          for (employee in data.employees) {
            items.push(employee.fullname + '<' + employee.email + '>');
          }
          alert('Employees: ' + items.join(', '));
      });
    });
  });
</script>

<form>
    <input id="json-button" type="button" value="get me some json">
</form>