Toan Tran
Toan Tran

Reputation: 2047

How to get each element from list on spring mvc controller inside javascript

I am using a Spring MVC. Inside controller I am get list object from model and passing this list to on view. I pass index of loop to javascript function.It's OK but now I would like to get value of each object by index inside javascript. How can i do it? Here is my controller class:

    @RequestMapping(method = RequestMethod.GET)
    public Model handleRequest(HttpServletRequest request,
    HttpServletResponse response,
    @RequestParam(required = false, value = "q") String query) throws Exception {

        Model model = new ExtendedModelMap();
        String orderItem = request.getParameter("order_item");
        List<Long> itemsIdList = new ArrayList<Long>();
        List<OrderRequest> orderRequestList =               getItemToppingCount(orderItem,itemsIdList);
        model.addAttribute("itemsSelected", orderRequestList);

        return model;
    }

This is my JSP:

    <script>
    function remove_confirm_order(index){
        alert(index); // OK
        // Get value of first object in list
        var str1 = '${itemsSelected[0].name}';
        // When adding this line, I can't show anything from JSP
        var str2 = '${itemsSelected['+index+'].name}';
        alert(str1);
    }
    </script>
    <c:forEach var="item" items="${itemsSelected}" varStatus="loop">
    <a href="#" onclick="remove_confirm_order('${loop.index}');" />
    </c:forEach>

Upvotes: 0

Views: 6030

Answers (2)

midhun mathew
midhun mathew

Reputation: 343

You can do this.

 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


  <script>

  var data = [];

  <c:forEach var="spring_data" items="${data_from_spring}">
    
  data.push(spring_data);

  </forEach>

  console.log(data);

</script>

You create an array in javascript. Then using a jsp tag within the script tag, you can fill in the data to the array. Remember to do the jstl declaration at the top

Upvotes: 0

Arpit Aggarwal
Arpit Aggarwal

Reputation: 29316

You can achieve the same referring below snippet:

<script>
    function remove_confirm_order(index, item){
        alert(index); // OK
        alert(item);  //OrderRequest
        var orderRequest = item;
        // Now extract value from item(instance of OrderRequest), example, orderRequest.getValue(index);
        // Get value of first object in list
        var str1 = '${itemsSelected[0].name}';
        // When adding this line, I can't show anything from JSP
        var str2 = '${itemsSelected['+index+'].name}';
        alert(str1);
    }
    </script>

    <c:forEach var="item" items="${itemsSelected}" varStatus="loop">
    <a href="#" onclick="remove_confirm_order('${loop.index}', ${item});" />
    </c:forEach>

Better is to make an AJAX call to the controller from JavaScript, get the response back and do whatever you want to do.

<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    function callHandleRequest() {
        $.ajax({
            url : '/url/to/your/controller',
            success : function(result) {
                console.log(result);
            }
        });
    }
</script>

Upvotes: 0

Related Questions