title: output JSON array in a html table(a jsp page)
body: <p>As the title suggested, how do I output a JSON array correctly in a table from a JSP page?</p>
  
  <p>Right now whenever I display the JSON array object using <code>&lt;c:out value="${jsonArray}"/&gt;</code> but it just displays the whole contents of it in JSON string i.e <code>{name: hello, address: baker street }</code> but what I want to do is somehow parse this and display the info appropriately like this:</p>
  
  <pre><code>**name**      **address**
  hello     baker street
  spring    java
  tim       sun 
  </code></pre>
  
  <p>Is it possible in JSTL? I am new to JSTL stuff.</p>
  
  <pre><code>package com.kc.models;
  
  import java.io.ByteArrayOutputStream;
  import java.io.IOException;
  import java.io.InputStream;
  import java.sql.Blob;
  import java.sql.SQLException;
  
  import org.hibernate.Hibernate;
  
  public class FileObject {
  
      private String filename;
      private String type;
      private double size;
      private Blob file;
      private int id;
      private String os;
      private String description;
  
      public FileObject() {
  
      }
  
      /**
       * Constructor for use in returning just the list of files without the
       * actual content
       * 
       * @param name
       * @param size
       * @param id
       * @param type
       */
      public FileObject(String name, double size, int id, String type) {
          this.filename = name;
          this.type = type;
          this.size = size;
          this.id = id;
  
      }
  
      /**
       * Constructor used to create a fileObject with all its properties assigned
       * 
       * @param name
       * @param size
       * @param id
       * @param type
       * @param file
       */
      public FileObject(String name, double size, int id, String type, Blob file,
              String os, String description) {
          this.filename = name;
          this.type = type;
          this.size = size;
          this.id = id;
          this.file = file;
          this.os = os;
          this.description = description;
  
      }
  
      public FileObject(String description){
          this.description = description;
      }
  
      public int getId() {
          return id;
      }
  
      public void setId(int id) {
          this.id = id;
      }
  
      public String getFilename() {
          return filename;
      }
  
      public void setFilename(String fileName) {
          this.filename = fileName;
      }
  
      public String getType() {
          return type;
      }
  
      public void setType(String type) {
          this.type = type;
      }
  
      public double getSize() {
          return size;
      }
  
      public void setSize(double size) {
          this.size = size;
      }
  
      public Blob getFile() {
          return file;
      }
  
      public void setFile(Blob file) {
          this.file = file;
      }
  
      public String getOs() {
          return os;
      }
  
      public void setOs(String os) {
          this.os = os;
      }
  
      public String getDescription() {
          return description;
      }
  
      public void setDescription(String description) {
          this.description = description;
      }
  
  
  }
  
  
  
  @Override
      public ModelAndView handleRequest(HttpServletRequest request,
              HttpServletResponse response) throws Exception {
          // TODO call a method that returns a list of Mobile Apps.
  
  
          String fileType = ServletRequestUtils.getRequiredStringParameter(request, "fileType");
  
  
          //testAddingSomeFilesToDb();
          return new ModelAndView("" + "testJsonResponse", "jsonArray",
                  getFileList(fileType) );
  
      } 
  
  /**
   * Get file list from sql server based on type
   * @return file list in json
   */ 
  private JSONArray getFileList(String type) {
      // TODO: Get request parameter that states what type of file extensions
      // the client wants to recieve
  
      ctx = new ClassPathXmlApplicationContext("zang-file-service.xml");
      FileHelper file = (FileHelper) ctx.getBean("fileHelper");
  
      return file.getFileList(type);
  }
  
  
  
  
  public JSONArray getFileList(String type) {
  
          return constructJsonArray(dbFileHelper.getFileList(type));
      }
  
      private JSONArray constructJsonArray(List&lt;FileObject&gt; fileList) {
  
          JSONArray mJsonArray = new JSONArray();
          JSONObject mJsonFileObject = new JSONObject();
  
          for (int i = 0; i &lt; fileList.size(); i++) {
              mJsonFileObject.put("FileObject", fileList.get(i));
              System.out.println("File ID = " + fileList.get(i).getId());
              System.out.println("fileName = " + fileList.get(i).getFilename());
              System.out.println("type = " + fileList.get(i).getType());
              System.out.println("size = " + fileList.get(i).getSize());
              mJsonArray.add(mJsonFileObject);
  
          }
  
          return mJsonArray;
      }
  </code></pre>
  
  <p>here is my jsp page:</p>
  
  <pre><code>&lt;%@ include file="/WEB-INF/jsp/include.jsp" %&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              var files = "${jsonArray}";
              $(document).ready(function() {
                  var table = $('&lt;table/&gt;').appendTo($('#somediv'));
                  $(files).each(function(i, file) {
                      $('&lt;tr/&gt;').appendTo(table)
                          .append($('&lt;td/&gt;').text(file.filename))
                          .append($('&lt;td/&gt;').text(file.id))
                          .append($('&lt;td/&gt;').text(file.type))
                          .append($('&lt;td/&gt;').text(file.size))
                          .append($('&lt;td/&gt;').text(file.os));
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="somediv"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>edit: here is my json output:</p>
  
  <pre><code>  var files = [{"FileObject":{"description":"","file":null,"filename":"ACG Simulator(firefox).jpg","id":6,"os":"","size":172,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"car.jpg","id":11,"os":"","size":152,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"contacts highlighted.jpg","id":13,"os":"","size":47,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"contacts highlighted2.jpg","id":14,"os":"","size":49,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"contacts options.jpg","id":15,"os":"","size":49,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"edit contact view.jpg","id":17,"os":"","size":52,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"fileObject.jpg","id":20,"os":"","size":30,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"groups.jpg","id":27,"os":"","size":31,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"inside contacts.jpg","id":31,"os":"","size":49,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"Music highlighted.jpg","id":37,"os":"","size":47,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"music options view.jpg","id":38,"os":"","size":46,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"music phone view.jpg","id":39,"os":"","size":51,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"music vault view.jpg","id":40,"os":"","size":48,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"nice.jpg","id":41,"os":"","size":225,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"photo highlighted.jpg","id":42,"os":"","size":47,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"photo options view.jpg","id":43,"os":"","size":48,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"photo preview view.jpg","id":44,"os":"","size":46,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"photos phone view.jpg","id":45,"os":"","size":51,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"photos vault view.jpg","id":46,"os":"","size":49,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"svn error.jpg","id":54,"os":"","size":35,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"Video Highlighted.jpg","id":55,"os":"","size":47,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"Videos options view.jpg","id":56,"os":"","size":47,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"videos phone view.jpg","id":57,"os":"","size":50,"type":"jpg"}},{"FileObject":{"description":"","file":null,"filename":"videos Vault view.jpg","id":58,"os":"","size":49,"type":"jpg"}}]
  </code></pre>