Stack Exchange
How to obtain Collection<Item> using JQuery and JSON
I'm working on java web project using tomcat, jsp, bootstrap, struts2, mysql, gson. 
I have Product entity:
public class Product{
    private long id;
    private String name;
    private double price;
    private long storeId;
    //getters and setters
}

And action controller class ViewAllProducts:
public class ViewAllProducts extends ActionSupport {
    @Override
    public String execute() throws Exception {
        LOG.trace("Start execute");
        Collection<Product> products = productDAO.findAll();
        Gson gson = new Gson();
        JsonElement element = gson.toJsonTree(products,
                new TypeToken<Collection<Product>>() {
                }.getType());
        JsonArray jsonArray = element.getAsJsonArray();
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(jsonArray);
        LOG.trace("Finished execute");
        return null;
    }
}

This is my code from jsp page where I do Ajax call for this action:
<%@ include file="/WEB-INF/jspf/directive/page.jspf"%>
<%@ include file="/WEB-INF/jspf/directive/taglib.jspf"%>
<html>
<%@ include file="/WEB-INF/jspf/head.jspf"%>
<body>
    <%@ include file="/WEB-INF/jspf/menu.jspf"%>
    <div class="container" style="width: 40%">
        <div class="results"></div>
    </div>
<script type="text/javascript">
    $.ajax({
        type : 'GET',
        dataType : 'json',
        url : 'product/upload_products',
        success : function(products) {
            for ( var product in products) {
                $('#results').append(
                        'Name:' + product.name + ' Price: ' + product.price
                                + '<br>');
            }
        },
    })
</script>
</body>
</html>

When I'm debugging in Mozilla I see that call to ViewAllProducts was successful and it returned some json:

But I can't see it on the page, so my function in success attribute doesn't work. How it should be fixed ?

I've finally figured out where the problem lies. Spent a lot of time debugging, but at the end found so silly mistake:
instead referring to id attribute I referred to class attribute, so just should modify:
<div class="results"></div>

to
<div id="results"></div>


Try replacing
for ( var product in products) {
                $('#results').append(
                        'Name:' + product.name + ' Price: ' + product.price
                                + '<br>');
            }

with
$.each(products, function(index, product) {
    $('#results').append('Name:' + product.name + ' Price: ' + product.price + '<br>');
});


i've tried your solution, but result is still the same - no output
