Блог

Главная - Вопросы по программированию - вывод массива JSON в html-таблицу (страница jsp)

вывод массива JSON в html-таблицу (страница jsp)

#java #json #jsp

#java #json #jsp

Вопрос:

Как следует из названия, как мне правильно вывести массив JSON в таблицу со страницы JSP?

Прямо сейчас всякий раз, когда я отображаю объект массива JSON, используя <c:out value="${jsonArray}"/> но он просто отображает все его содержимое в строке 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"}}]

Ответ №1:

Ваш вопрос слишком неоднозначен, чтобы дать подходящий ответ, поэтому я рассмотрю все возможные сценарии:

  1. У вас есть это как переменная 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, вы можете скопировать и вставить его и запустить:

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

  2. У вас это есть как строковая переменная Java, вот так:

     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.
}

    Пусть сервлет поместит его в область запроса и перешлет в 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>

  3. То же, что и 2), он у вас есть как переменная Java, но вы хотели бы получить его с помощью Ajax в JSP. Затем создайте класс сервлета, который выполняет следующее в doGet() методе:

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

Комментарии:

1. Да, я создаю свою строку массива json из POJO. причина в том, что у меня есть два клиента. один хочет получить его в формате строки json, а другой (веб-сайт) хочет получить его в виде таблицы со списком результатов. я обновлю свой OP. проверьте это для моего класса POJO

2. Затем перейдите к варианту 3. Используйте Gson для преобразования List<Person> в JSON типа как String json = new Gson().toJson(persons); и запишите его в ответ сервлета. На странице JSP просто используйте jQuery (или обычный Javascript), чтобы создать из него HTML-таблицу.

3. Щелкните правой кнопкой мыши страницу в браузере и выберите просмотреть исходный код . Выглядит ли синтаксис JSON допустимым? Бьюсь об заклад, это не так. По крайней мере, избавьтесь от этих двойных ссылок.

4. круто, ок, еще раз проверьте мою новую правку. на этот раз показано, как выглядит мой вывод json

5. Вы обращаетесь к JSON неправильным способом (или JSON создан в неправильном формате). Массив JSON содержит объекты со свойством FileObject , которое, в свою очередь, содержит другой объект, представляющий файл. Вам нужно заменить ваш код jQuery для доступа к свойствам файла на file.FileObject.xxx вместо file.xxx .

Ответ №2:

Предполагая:

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

Один из способов сделать это — сконструировать html в коде Javascript следующим образом:

  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;