Return Java list into jQuery object

Question

Basically I have an Ajax request instantiated by a button where it is passed to my controller, and then that controller returns a list of objects. I initially was thinking whether this could be done by loading the returned ajax object into the JSTL forEach loop, but I think that cannot be done after some research. This is my ajax request which loads sighting based on a value:

//edit the sighting based on the username value 
    $(this).on("click", ".edit_sighting", function(){
        $username = +$(".edit_sighting").val();
        $.get("${pageContext.request.contextPath}/getSighting/" + username, function(sightings){
            // load returned object somewhere 
        });
    });

This is my controller which handles the ajax request and responds returning a list of objects 'sighting':

@RequestMapping("/getSighting/{username}")
public @ResponseBody List<Sighting> getSighting(Model model, @PathVariable String username) {

    List<Sighting> sightings = sightingsService.getSightings(username);
    model.addAttribute("sightings", sightings);
    return sightings;
}

And essentially I would like to load the returned objects into a for each loop or something that would display the object fields. for example: something like that. My for each loop:

<c:forEach var="sighting" items="${sightings }">
        <c:out value="sighting.name"/> <!-- load some sighting value --> 
</c:forEach>

So essentially what I am trying to achieve is, load multiple or one 'sightings' into a modal type thing when a button is instantiated.

@DavidFregoli Given the presence of the @ResponseBody annotation, I assume the OP may already be serializing. — Kevin Bowersox
– Kevin Bowersox, Commented Oct 16, 2013 at 9:04

Aaron Digulla · Accepted Answer · 2013-10-16 09:03:04Z

2

You can't use JSTL for this since JSTL is executed on the server before a page is sent to the client. What you could do is render the HTML on the server and return a HTML document (instead of JSON). So the solution would be to define a JSP view which uses JSTL to render the list and change the AJAX request to accept HTML.

The other solution is to add a JavaScript based template engine and do the template rendering client side.

Or do it manually with jQuery. If you have

<ul id="sightings"></ul>

then you can

var sightings = $('#sightings');
sightings.empty();
$.each(sightings, function(index, e){
    var li = $('<li>');
    li.text(e);
    sightings.append(li);
});

answered Oct 16, 2013 at 9:03

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maff Over a year ago

I made a jsp which renders then called that specific table using ajax. Your solution was helpful. Thank you

Kevin Bowersox · Accepted Answer · 2013-10-16 09:01:43Z

1

The response to the ajax request is returned to the client, which does not have access to server side mechanisms such as JSTL. The code should use Javascript/jQuery on the client side to display the new DOM elements.

So if you had the following HTML on your page:

<ul id="sightings"></ul>

The callback would look like:

$(this).on("click", ".edit_sighting", function(){
    $username = +$(".edit_sighting").val();
    $.get("${pageContext.request.contextPath}/getSighting/" + username, function(sightings){
        var output = "";
        for(var i = 0; i < sightings.length; i++){
            output =+ "<li>" + sightings[i].name + "<\/li>";
        }
        $("#sightings").append(output);
    });
});

This will build a String containing HTML which has an li for each sighting. The HTML is then appended to the DOM as children of the #sightings ul.

answered Oct 16, 2013 at 9:01

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

1 Comment

Aaron Digulla Over a year ago

I sure hope that the names never contain HTML characters.

Raghvendra Garg · Accepted Answer · 2013-10-16 09:06:42Z

0

Since you are using ajax so the page will not reload once your request returns the response so anyway this code will not work. what you can do is instead of sending a list you can send a JSON array as response and each array element will have a JSON object having all the required properties and this array can be iterated after the response is received.

answered Oct 16, 2013 at 9:06

Raghvendra Garg

5151 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Return Java list into jQuery object

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related