output JSON array in a html table(a jsp page)

java json jsp

45,484

Solution 1

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

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

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>

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\" }"
    + "]";

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

Where the Person class look like this:

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

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

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>

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

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

Solution 2

Assuming:

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

One way to do it is to construct the html in Javascript code like this:

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

}
myHTMLStr+='</table>';

Now display the HTML string:

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

45,484

Author by

Jono

Updated on July 11, 2020

Comments

Jono almost 4 years

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

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

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

here is my jsp page:

<%@ 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>

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

Jono over 13 years

Yes i am constructing my json array string from a POJO. the reason is because i have two clients. one wants it as a json string format and the other(the web site) wants it as a table with a list of the results. i will update my OP. check it for my POJO class
BalusC over 13 years

Then go for option 3. Use Gson to convert List<Person> to JSON like as String json = new Gson().toJson(persons); and write it to servlet response. In the JSP page, just use jQuery (or plain Javascript) to create a HTML table out of it.
BalusC over 13 years

Rightclick page in browser and choose view source. Does the JSON syntax look valid? I bet it's not. At least, get rid of those doublequotes.
Jono over 13 years

cool ok check out my new edit again. this time showing how my json output looks like
BalusC over 13 years

You're accessing the JSON the wrong way (or the JSON is constructed in the wrong format). The JSON array contains objects with a property FileObject which in turn contains another object which represents the file. You need to replace your jQuery code to access the file properties by file.FileObject.xxx instead of file.xxx.
BalusC over 13 years

You're welcome. Don't forget to mark the most helpful answer accepted. See also stackoverflow.com/faq