2 replies to this topic

[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);
			}
		});
	});
});

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.

<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>

[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);

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;

var obj = myJSONRequest();

var newHTML='';
                              
newHTML +='<h1>'+obj.name +'</h1><b>'+obj.email+'</b>';
                                
$('#box').html( newHTML);

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

$searchString = document.getElementById("searchString").value;

could be as.

$searchString = $('#searchString').val();

[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.