在html表中输出JSON数组（jsp页面）

正如标题所示，如何在JSP页面的表中正确输出JSON数组？

现在每当我使用显示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 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页面：

        var files = "${jsonArray}"; $(document).ready(function() { var table = $('').appendTo($('#somediv')); $(files).each(function(i, file) { $('').appendTo(table) .append($('').appendTo(table) .append($('').text(person.name)) .append($('').text(person.address)); }); }); });

		      	
 假设： 
 jsonArray = [ {name: 'hello', address: 'baker street'}, ... ]; 
 一种方法是在Javascript代码中构造html，如下所示： 
  var myHTMLStr = '
').text(file.filename)) .append($('
').text(file.id)) .append($('
').text(file.type)) .append($('
').text(file.size)) .append($('
').text(file.os)); }); });    
   
 编辑：这是我的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"}}] 


	







 
	

		      	
 你的问题太过暧昧，无法给出合适的答案，所以我将涵盖所有可能的场景： 


 你有它像这样的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 ，你可以复制’n’paste’n’run它： 
         
   


 你有它作为Java String变量，如下所示： 
 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 ，例如Google Gson ： 
 List persons = new Gson().fromJson(jsonPersons, new TypeToken>() {}.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 迭代它： 
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> ...  
 
 
${person.name}
 
${person.address}
 
   


 与2）相同，您将它作为Java变量，但您希望通过JSP中的Ajax获取它。 然后创建一个Servlet类，它在doGet()方法中执行以下操作： 
 response.setCharacterEncoding("UTF-8"); response.setContentType("application/json"); response.getWriter().write(jsonPersons); 
 并通过jQuery Ajax调用它，其回调与1）相同。 
 $(document).ready(function() { var table = $('').appendTo($('#somediv')); $.getJSON('url/to/servlet', function(persons) { persons.each(function(i, person) { $('
 




'; for(var i in jsonArray) { myHTMLStr+=''; } myHTMLStr+='
' + jsonArray[i]['name'] + '
' + jsonArray[i]['address'] + '
'; 

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