在 html 表中输出 JSON 数组(一个 jsp 页面) [英] output JSON array in a html table(a jsp page)

问题描述

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

As the title suggested, how do I output a JSON array correctly in a table from a JSP page?

现在每当我使用 <c:out value="${jsonArray}"/> 显示 JSON 数组对象时，它只是在 JSON 字符串中显示它的全部内容，即 <代码>{name:你好，地址:baker street } 但我想要做的是以某种方式解析它并像这样适当地显示信息:

Right now whenever I display the JSON array object using <c:out value="${jsonArray}"/> but it just displays the whole contents of it in JSON string i.e {name: hello, address: baker street } but what I want to do is somehow parse this and display the info appropriately like this:

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

在 JSTL 中可以吗?我是 JSTL 的新手.

Is it possible in JSTL? I am new to JSTL stuff.

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 输出:

edit: here is my json output:

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

推荐答案

你的问题太含糊，无法给出合适的答案，所以我会涵盖所有可能的场景:

Your question is too ambigious to give a suitable answer, so I'll cover all possible scenarios:

1. 你把它当作一个 JavaScript 变量，就像这样:

1. You have it as a JavaScript variable like so:

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它:

I'd suggest to use jQuery to create a HTML table out of it. Here's an SSCCE, you can copy'n'paste'n'run it:

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

你把它当作一个 Java 字符串变量，就像这样:

You have it as a Java String variable like so:

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:

Then I suggest to use a JSON parser to get a List<Person> out of it, like 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 进行显示，如下所示:

Let the servlet put it in the request scope and forward to JSP for display like so:

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

在 JSP 中，使用 JSTL 对其进行迭代:

In JSP, use JSTL <c:forEach> to iterate over it:

<%@ 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获取它.然后创建一个 Servlet 类，它在 doGet() 方法中执行以下操作:

Same as 2), you have it as a Java variable, but you'd like to obtain it by Ajax in JSP. Then create a Servlet class which does the following in doGet() method:

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

并通过 jQuery Ajax 调用它，并带有与 1 相同的回调).

And call it by jQuery Ajax with a callback which does the same as 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));
        });
    });
});

这篇关于在 html 表中输出 JSON 数组(一个 jsp 页面)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！