• 0

jQuery Ajax insert JSON object into JSP page


Question

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]

2 answers to this question

Recommended Posts

  • 0

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]

  • 0

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.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • #1 DP and #8 HDMI, you can connect both monitors to your motherboard. It's not just one or the other, you can use both at the same time.
    • So, I will see exactly ZERO ads, because I f**ked off the stupid Facebook/Meta ages ago. I don't miss any of it at all.
    • Thunderbird 139.0.1 by Razvan Serea Thunderbird is a free, open-source, cross-platform application for managing email and news feeds. It is a local (rather than a web-based) email application that is powerful yet easy-to-use. Thunderbird is clean and elegant by default, but easily customizable to match your workflow and visual preferences. It is loaded with unique and powerful features. Thunderbird is developed, tested, translated and supported by the folks at Mozilla Corporation and by a group of dedicated volunteers. Thunderbird gives you control and ownership over your email. There are lots of add-ons available for Thunderbird that enable you to extend and customize your email experience. Thunderbird gives you IMAP/POP support, a built-in RSS reader, support for HTML mail, powerful quick search, saved search folders, advanced message filtering, message grouping, labels, return receipts, smart address book LDAP address completion, import tools, and the ability to manage multiple e-mail and newsgroup accounts. Thunderbird 139.0.1 fixes: Thunderbird could crash when copying a local folder to IMAP Upgrade to 139.0 incorrectly switched Table View to Cards View Download: Thunderbird 139.0.1 for Windows (EN/US) | 32-bit | ~70.0 MB (Open Source) Download: Thunderbird 139.0.1 for Linux (EN/US) | 74.7 MB Download: Thunderbird 139.0.1 for Mac OS (EN/US) | 127.0 MB Download: Thunderbird 139.0.1 in other languages View: Thunderbird Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • It's both. Bazzite forked the game mode so it's not just simply running big picture mode like on full desktop.
  • Recent Achievements

    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • Week One Done
      lilred1938 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      142
    2. 2
      Xenon
      130
    3. 3
      ATLien_0
      124
    4. 4
      +Edouard
      102
    5. 5
      snowy owl
      97
  • Tell a friend

    Love Neowin? Tell a friend!