在html表（jsp頁面）中輸出JSON數組

如標題所示，如何在JSP頁面的表中正確輸出JSON數組？在html表（jsp頁面）中輸出JSON數組

現在每當我顯示使用<c:out value="${jsonArray}"/> JSON數組對象，但它只是顯示它在JSON字符串中的全部內容，即{name: hello, address: baker street }但我想要做的是某種方式解析這一點，並適當地顯示信息是這樣的：

**name**  **address** 
hello  baker street 
spring java 
tim  sun

在JSTL中可以嗎？我是JSTL的新手。

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<FileObject> fileList) { 

     JSONArray mJsonArray = new JSONArray(); 
     JSONObject mJsonFileObject = new JSONObject(); 

     for (int i = 0; i < 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; 
    }

這裏是我的jsp頁面：

<%@ include file="/WEB-INF/jsp/include.jsp" %> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      var files = "${jsonArray}"; 
      $(document).ready(function() { 
       var table = $('<table/>').appendTo($('#somediv')); 
       $(files).each(function(i, file) { 
        $('<tr/>').appendTo(table) 
         .append($('<td/>').text(file.filename)) 
         .append($('<td/>').text(file.id)) 
         .append($('<td/>').text(file.type)) 
         .append($('<td/>').text(file.size)) 
         .append($('<td/>').text(file.os)); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="somediv"></div> 
    </body> 
</html>

編輯：這裏是我的JSON輸出：

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"}}]

來源

2010-09-20 jonney

假設：

jsonArray = [ {name: 'hello', address: 'baker street'}, ... ];

一種方式來做到這一點是在這樣的Javascript代碼中構建html ：

var myHTMLStr = '<table>'; 
for(var i in jsonArray) { 
myHTMLStr+='<tr><td>' + jsonArray[i]['name'] + '</td><td>' + jsonArray[i]['address'] + '</td></tr>'; 

} 
myHTMLStr+='</table>';

現在顯示HTML字符串：

document.getElementById('tableOutput').innerHTML = myHTMLStr;

來源

2010-09-20 11:56:19 Andreas

你的問題太ambigious給一個合適的答案，所以我會涵蓋所有可能的方案：

你有它作爲JavaScript變量，如下所示：

var persons = [ 
    { "name": "John Doe", "address": "Main Street 1" }, 
    { "name": "Jane Doe", "address": "Baker Street 1" }, 
    { "name": "Jack Doe", "address": "Church Street 1" } 
];

我建議使用jQuery來創建一個HTML表格。下面是一個SSCCE，你可以copy'n'paste'n'run它：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      var persons = [ 
       { "name": "John Doe", "address": "Main Street 1" }, 
       { "name": "Jane Doe", "address": "Baker Street 1" }, 
       { "name": "Jack Doe", "address": "Church Street 1" } 
      ]; 
      $(document).ready(function() { 
       var table = $('<table/>').appendTo($('#somediv')); 
       $(persons).each(function(i, person) { 
        $('<tr/>').appendTo(table) 
         .append($('<td/>').text(person.name)) 
         .append($('<td/>').text(person.address)); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="somediv"></div> 
    </body> 
</html>

你把它定義爲一個字符串變量，像這樣：

String jsonPersons = "[" 
     + "{ \"name\": \"John Doe\", \"address\": \"Main Street 1\" }," 
     + "{ \"name\": \"Jane Doe\", \"address\": \"Baker Street 1\" }," 
     + "{ \"name\": \"Jack Doe\", \"address\": \"Church Street 1\" }" 
    + "]";

那麼我建議使用JSON解析器獲得List<Person>出來，像Google Gson：

List<Person> persons = new Gson().fromJson(jsonPersons, new TypeToken<List<Person>>() {}.getType());

凡Person類是這樣的：

public class Person { 
    private String name; 
    private String address; 
    // Add or generate getters/setters. 
}

讓這個servlet把它的請求範圍，並轉發給JSP顯示，像這樣：

request.setAttribute("persons", persons); 
request.getRequestDispatcher("/WEB-INF/persons.jsp").forward(request, response);

在JSP中，使用JSTL <c:forEach>遍歷它：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
... 
<table> 
    <c:forEach items="${persons}" var="person"> 
     <tr> 
      <td>${person.name}</td> 
      <td>${person.address}</td> 
     </tr> 
    </c:forEach> 
</table>

與2相同），您將它作爲Java變量，但您希望通過JSP中的Ajax獲取它。然後在doGet()方法創建一個Servlet類執行以下操作：

response.setCharacterEncoding("UTF-8"); 
response.setContentType("application/json"); 
response.getWriter().write(jsonPersons);

而且的jQuery Ajax和回調，其不一樣的1稱呼它）。

$(document).ready(function() { 
    var table = $('<table/>').appendTo($('#somediv')); 
    $.getJSON('url/to/servlet', function(persons) { 
     persons.each(function(i, person) { 
      $('<tr/>').appendTo(table) 
       .append($('<td/>').text(person.name)) 
       .append($('<td/>').text(person.address)); 
     }); 
    }); 
});

來源

2010-09-20 11:59:50 BalusC

是我從一個POJO構建我的JSON字符串數組。原因是因爲我有兩個客戶。一個人希望它成爲一個json字符串格式，另一個（網站）希望它成爲一張帶有結果列表的表格。我會更新我的OP。檢查它爲我的POJO類 – jonney 2010-09-20 12:05:36

然後去選項3.使用Gson將'List '轉換爲JSON，如'String json = new Gson（）。toJson（persons）;'並將其寫入servlet響應。在JSP頁面中，只需使用jQuery（或純Javascript）來創建一個HTML表格即可。 – BalusC 2010-09-20 12:07:05

歡呼會讓它去 – jonney 2010-09-20 12:09:52

在html表（jsp頁面）中輸出JSON數組

回答

相關問題