ansaurus

Question

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

Answer 1

+1 A:

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;

andreas 2010-09-20 11:56:19

Answer 2

+1 A:

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"&gt;&lt;/script&gt;
        <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));
        });
    });
});

BalusC 2010-09-20 11:59:50

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

jonney 2010-09-20 12:05:36

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 2010-09-20 12:07:05

cheers will give it a go

jonney 2010-09-20 12:09:52

Hi, i have tried the above and nothing appears on screen

jonney 2010-09-20 14:17:55

Check my new edit on my original post

jonney 2010-09-20 14:18:53

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.

BalusC 2010-09-20 14:24:26

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

jonney 2010-09-20 14:31:02

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 2010-09-20 14:39:32

yup that did the trick. thanks

jonney 2010-09-20 15:30:37

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

BalusC 2010-09-20 15:36:57

ansaurus

tags:

views:

answers:

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

related questions