get json array objects in javascript

Question

Hi how to get json array elements in different ids in response?

//server side jsp

 <%@page import="net.sf.json.JSONObject"%>
<%@page import="net.sf.json.JSONArray"%>
<%
 JSONArray arrayObj=new JSONArray(); 
 JSONObject obj=new JSONObject();
 obj.put("name","data");// how can i display string "name" in secondcombobox id?
 obj.put("roll_no","data"); how can i display string "roll_no" in thirdcombobox id?
 out.println(obj.toString());
%>

client side jsp where retrieving json array elements in javascript

 $("#firstcombo").change(function() {
 $.get('comboboxpage.jsp', { combo1Val : $(this).val() }, function(responseData) {
 $("#secondcomboboxid").replaceWith(data.name);// here i want to display name, how can i do it?
 $("#thirdcomboboxid").replaceWith(data.roll_no);// here i want to display roll no, how can i do it?
});
});
<input type="text" id="secondcomboboxid" name="secondcomboboxid"/>// how can i show name here?
<input type="text" id="thirdcomboboxid" name="thirdcomboboxid"/> how can i show roll_no here?

How can i display name in secondcomboboxid and roll no in thirdcomboboxid? I googled a lot but could not find any solution, Any ideas please

• Rafay: post the json you are getting in the response from the server
• vinczemarton: Please post the full string value of responseData so I can be sure of it's format.
• Tom: @3nigma i am getting no response from server side, how should i modify JSON Array objects to get response in client side?
• Tom: @SoonDead full string value of responseData means? If i am writing out.println("somevalue"); in server side then i am getting "somevalue" in secondcombobox id and also in thirdcombobox id, which i want to separate, how should i modify my client and server side code?
• fncomp: What does the network tab say in e.g., FireBug ?

Answer 1

If you are loading JSON data, you'd better use the method .getJSON() that will take care of parsing the response to a JSON object automatically.

Then you response data being an object, you can access its properties with the dot notation: data.name.

Special case thought for the second property "roll no". As there is a white space, you would have to use the array notation to access the value: data['roll no'].

$.getJSON('comboboxpage.jsp', { combo1Val : $(this).val() }, function(data) {
 $("#secondcomboboxid").replaceWith(data.name);
 $("#thirdcomboboxid").replaceWith(data['roll_no']);
});

More generally, as mentionned by @diEcho, to parse a json string, you can use $.parseJSON()

• fncomp: Shouldn't that be: data['roll no'] or is there some change caused by arrayObj.add()?
• Tom: thanks Didier for the answer but in server side JSON what modification should i do? i am getting no value in client side by on change event of first combo box.
• Didier Ghys: I'm no familiar with JSP, but you can try following this example (first part, not the ajax part)
• Didier Ghys: I guess if you're sending a pure array, you're going to end up with ['name', 'roll no'] and you'll have to use data[0] and data[1] to access the values.
• Tom: JSONObject obj=new JSONObject(); obj.put("name","data"); obj.put("roll_no","data"); out.println(obj); like this?

Answer 2

try this

<%
 JSONObject arrayObj= new JSONObject();
 arrayObj.put("name","john");
 arrayObj.put("roll no","007");
 response.setContentType("application/json");
 response.getWriter().write(arrayObj.toString());
%>

client side

$.ajax({
url:'comboboxpage.jsp',
dataType:'json',
type:'GET',
success:function(data){
console.log(data);
},
error:function(jxhr){
console.log(jxhr.responseText);
}
}); 

here is a helpful link

• Tom: thanks 3nigma, but i am still getting no response, any idea? have you tested it in your terminal?
• Rafay: no i cant test it atm, see the answer update use $.ajax instead and make a error handler. are you sure the path to comboboxpage.jsp is correct, what does the firebug tells you, does it show status 200 ?

Answer 3

use

responseData.name
responseDate.roll_no

or use parseJSON

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

• Tom: thanks diEcho for the answer but in server side JSON what modification should i do? i am getting no value in client side by on change event of first combo box.
• xkeshav: I'm no familiar with JSP. but you must see the comment given by @Didier Ghys

Answer 4

So, if I get your setup correctly, you're handling e.g., :8080 with some simple servlet and you want to give back JSON data via a jsp. I think this is not a great idea, but for prototyping, I suppose... Here's a possible just make it work:

<% 
 JSONArray arrayObj=new JSONArray(); 
 arrayObj.put("name");
 arrayObj.put("roll no");
 out.println(arrayObj.toString());
%>

See above for the front-end components.

• Tom: ok for receiving data i should follow Didier Ghys's code right? but it is not displaying name/roll_no in second/third textbox, have a look at my updated question please