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

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

现在，每当我使用

显示JSON数组对象，但它只是以JSON字符串显示它的全部内容，即

{name:hello，address:baker street}

，但我想做的是以某种方式解析它，并以如下方式适当地显示信息：

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

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

}
myHTMLStr+='</table>';

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

在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;
    }

假设：

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

一种方法是用Javascript代码构建html，如下所示：

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

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

}
myHTMLStr+='</table>';

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

---

你的问题太模糊，无法给出合适的答案，因此我将介绍所有可能的情况：

您可以将其作为JavaScript变量，如下所示：

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

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

我建议使用它创建一个HTML表。这里有一个，你可以复制粘贴运行它：

<!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>

然后我建议使用JSON解析器从中获取一个

列表

，如：

让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" %>
...
<table>
    <c:forEach items="${persons}" var="person">
        <tr>
            <td>${person.name}</td>
            <td>${person.address}</td>
        </tr>
    </c:forEach>
</table>

并通过jQuery Ajax调用它，其回调与1）相同

$（文档）.ready（函数（）{
变量表=$（''）.appendTo（$（'#somediv'）；
$.getJSON（'url/to/servlet'，函数（人）{
人员。各职能部门（一、人员）{
$（''）.appendTo（表）
.append（$（''）.text（person.name））
.append（$（''）.text（person.address））；
});
});
});

---

是的，我正在从POJO构造json数组字符串。原因是我有两个客户。一个希望它是json字符串格式，另一个（网站）希望它是一个带有结果列表的表。我将更新我的OP。检查我的POJO类，然后选择选项3。使用Gson将

List

转换为JSON，类似于

String JSON=new Gson（）.toJson（persons）并将其写入servlet响应。在JSP页面中，只需使用jQuery（或纯Javascript）从中创建一个HTML表。右键单击浏览器中的页面并选择查看源代码。JSON语法看起来有效吗？我打赌不是。至少，去掉那些双引号。好的，再次查看我的新编辑。这一次显示我的json输出看起来像是以错误的方式访问json（或者json是以错误的格式构造的）。JSON数组包含具有属性
FileObject
的对象，而该属性又包含表示文件的另一个对象。您需要将jQuery代码替换为
file.FileObject.xxx
而不是
file.xxx
来访问文件属性。
<%@ 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>

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

$(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));
        });
    });
});