How to layout json array of objects using JQuery and Bootstrap

Question

I'm working on online shopping application using struts 2, mysql , jquery, jsp, bootstrap, gson and tomcat.

I have Java entity called Product, controller action that return json array of products and jsp page that calls that action through ajax and displays all products to user.

What I don't understand is to how display such json array.

I've googled for JQuery Datatables plugin as it propose filtering and pagination, but I don't get how it should be configured, because I want to group information not by product fields, but to group by every product entity like in the following picture: example of products view

If there is a better plugins or other solutions please suggest them, but please note that in future development I want to add an image of Product.

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 id="results"></div>
    </div>
<script type="text/javascript">
    $.ajax({
        type : 'GET',
        dataType : 'json',
        url : 'product/upload_products',
        success : function(products) {
              $.each(products, function(index, product) {
    $('#results').append(?????);
});
            }
        },
    })
</script>
</body>
</html>

Json array output example:

    [{"name":"Amet Ultricies Incorporated","price":679.71,"storeId":1,"id":1},
{"name":"Ut Nisi A PC","price":1133.43,"storeId":1,"id":2},
{"name":"Ligula Limited","price":156.66,"storeId":1,"id":100}]

Don't use datatables. Datatables is great for actual tables, but not for generic lists. Instead use a templating engine. I like dust templates, others prefer mustache or handlebars. There are several to choose from. Here's an interesting article on how LinkedIn chose the templating engine for their platform. — gilly3
– gilly3, Commented Mar 18, 2015 at 19:42
@gilly3 thanks for the links you provided, i will look at it. but as i googled for now is it a best solution for me is to use dust.js, if so would you explain ? — marknorkin
– marknorkin, Commented Mar 18, 2015 at 22:32

Eddie Roman · Accepted Answer · 2015-03-18 19:46:17Z

1

Use .each to loop over everything and write the values to the page. If each items ID is used as a div ID or class, you can use that to target each product. But without seeing the actual markup, its hard to say how each value will be used. Youll want to do something similar to this in your success function.

success: function (data) {
        $(data.products).each(function (index, item) {

            $("#"+item.id+" .name").html(item.name);
            $("#"+item.id+" .price").html(item.price);
            $("#"+item.id+" .store").html(item.store);

        });
    },
    error: function () {}

});.

Of course, this only works if you have the data already on the page. If you nee to build the entire list of products on the page, I suggest you use a JS template system like Mustache JS with ICanHaz. http://icanhazjs.com/

answered Mar 18, 2015 at 19:46

Eddie Roman

452 bronze badges

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

2 Comments

marknorkin Over a year ago

also would you explain why icanhaz.js is the best fit to my problem ?

marknorkin Over a year ago

stackoverflow.com/questions/29228241/…

Collectives™ on Stack Overflow

How to layout json array of objects using JQuery and Bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related