title: How to layout json array of objects using JQuery and Bootstrap
body: <p>I'm working on online shopping application using struts 2, mysql , jquery, jsp, bootstrap, gson and tomcat.</p>
  
  <p>I have Java entity called <code>Product</code>, controller action that return json array of products and jsp page that calls that action through ajax and displays all products to user.</p>
  
  <p>What I don't understand is to how display such json array.</p>
  
  <p>I've googled for <a href="https://www.datatables.net/" rel="nofollow noreferrer">JQuery Datatables plugin</a> 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: 
  <img src="https://i.stack.imgur.com/xvH53.jpg" alt="example of products view"></p>
  
  <p>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 <code>Product</code>.</p>
  
  <p><code>Product</code> entity:</p>
  
  <pre><code>public class Product{
      private long id;
      private String name;
      private double price;
      private long storeId;
      //getters and setters
  }
  </code></pre>
  
  <p>And action controller class ViewAllProducts:</p>
  
  <pre><code>public class ViewAllProducts extends ActionSupport {
      @Override
      public String execute() throws Exception {
          LOG.trace("Start execute");
          Collection&lt;Product&gt; products = productDAO.findAll();
          Gson gson = new Gson();
          JsonElement element = gson.toJsonTree(products,
                  new TypeToken&lt;Collection&lt;Product&gt;&gt;() {
                  }.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;
      }
  }
  </code></pre>
  
  <p>This is my code from jsp page where I do Ajax call for this action:</p>
  
  <pre><code>&lt;%@ include file="/WEB-INF/jspf/directive/page.jspf"%&gt;
  &lt;%@ include file="/WEB-INF/jspf/directive/taglib.jspf"%&gt;
  &lt;html&gt;
  &lt;%@ include file="/WEB-INF/jspf/head.jspf"%&gt;
  &lt;body&gt;
      &lt;%@ include file="/WEB-INF/jspf/menu.jspf"%&gt;
      &lt;div class="container" style="width: 40%"&gt;
          &lt;div id="results"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      $.ajax({
          type : 'GET',
          dataType : 'json',
          url : 'product/upload_products',
          success : function(products) {
                $.each(products, function(index, product) {
      $('#results').append(?????);
  });
              }
          },
      })
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Json array output example:</p>
  
  <pre><code>    [{"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}]
  </code></pre>