jQuery Ajax insert JSON object into JSP page

[saiz66]

Hi all,

I have a question on how I should display a JSON object in a JSP page. I have a simple example where it is properly getting the JSON object from the servlet called data and it is simply putting data.name in a <h1> html tag and the data.email in <b> tag.

$(document).ready(function() {
	$('#getData').click(function() {
		$searchString = document.getElementById("searchString").value;
		$.ajax({
			url : 'JsonServlet',
			type : 'post',
			data: {searchString : $searchString},
			dataType : 'json',
			success : function(data) {
				var newHTML='';

				newHTML +='<h1>'+data.name +'</h1><b>'+data.email+'</b>';

				$('#box').html( newHTML);
			}
		});
	});
});
[/CODE]

Is there a better way of displaying this instead of creating a variable which concatenates the JSON object with the html? I am used to formatting the JSP page using JSTL which I find much cleaner. Thanks in advance.

[CODE]
<div id="data">
<c:forEach var="current" items="${requestScope.exceptionList}">
<div class='data-top'>
${current.defectNumber} <a
href='DisplayUpdateServlet.do?defect=${current.defectNumber } '
class='edit'><img src='css/image/edit.png' border='0'></a>
</div>
<div class='data-bottom'>
<div class='data-bottom-heading'>Activity</div>
<br />
<div class='data-bottom-body'>${current.activity }</div>
<br />
<div class='data-bottom-heading'>Exception</div>
<br />
<div class='exception'>${current.exception }</div>
</div>
<br />
</c:forEach>
</div>
</div>
[/CODE]

[mbowman]

Are you not missing out adding the data object to a parseJSON method?

I always do this when dealing with the returned data.

success : function(data) {
var obj = jQuery.parseJSON(data);[/CODE]

Which then allows me to do obj.name

I'm kind of missing out what you're getting at. JSTL is a server side taglibrary... if you're wanting to clean up your JS you could add in the code above to a function and return the JSON;

[CODE]
var obj = myJSONRequest();

var newHTML='';

newHTML +='<h1>'+obj.name +'</h1><b>'+obj.email+'</b>';

$('#box').html( newHTML);
[/CODE]

also noticed you're mixing standard JS with JQuery might as well just use the JQuery get by id?

[CODE]$searchString = document.getElementById("searchString").value;[/CODE]

could be as.

[CODE]$searchString = $('#searchString').val();[/CODE]

[Tjcool007]

I believe jsRender does something like you want. Unfortunately it's still pre-beta stage (although it's actively developed).

You'll probably find others online though. Just search for javascript/jquery templating systems or something.