CODEWITHSUNDEEP
javajavascriptjqueryajaxspring-mvc
Maff
Maff

Reputation: 1032

Return Java list into jQuery object

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.

Upvotes: 0

Views: 4287

Answers (3)

Raghvendra Garg
Raghvendra Garg

Reputation: 515

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.

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328594

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

Upvotes: 2

Kevin Bowersox
Kevin Bowersox

Reputation: 94459

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.

Upvotes: 1

Related Questions