sortie JSON tableau dans un tableau html(une page jsp)

Comme le titre le suggère, comment puis-je sortie un tableau JSON correctement dans une table à partir d'une page JSP?

Droit maintenant, chaque fois que j'affiche le tableau JSON objet à l'aide de <c:out value="${jsonArray}"/> mais il affiche tout le contenu de celui-ci dans la chaîne JSON j'.e {name: hello, address: baker street } mais ce que je veux faire est en quelque sorte à analyser cette et afficher les infos de manière appropriée comme ceci:

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

Est-il possible dans JSTL? Je suis nouveau sur JSTL choses.

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

voici ma page 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>

edit: voici mon json de sortie:

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

InformationsquelleAutor jonney | 2010-09-20

11

Votre question est trop ambiguë pour donner une réponse, donc je vais couvrir tous les scénarios possibles:
1. Vous avez aussi une variable JavaScript comme ceci:
```
var persons = [
{ "name": "John Doe", "address": "Main Street 1" },
{ "name": "Jane Doe", "address": "Baker Street 1" },
{ "name": "Jack Doe", "address": "Church Street 1" }
];
```
  Je vous suggère d'utiliser jQuery pour créer un tableau HTML en dehors de ça. Voici un SSCCE, vous pouvez copier n' " coller'n'run c':
```
<!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. Vous avoir comme Java variable de Chaîne comme suit:
```
String jsonPersons = "["
+ "{ \"name\": \"John Doe\", \"address\": \"Main Street 1\" },"
+ "{ \"name\": \"Jane Doe\", \"address\": \"Baker Street 1\" },"
+ "{ \"name\": \"Jack Doe\", \"address\": \"Church Street 1\" }"
+ "]";
```
  Alors je vous suggérons d'utiliser un parser JSON pour obtenir un List<Person> hors de lui, comme Google Gson:
```
List<Person> persons = new Gson().fromJson(jsonPersons, new TypeToken<List<Person>>() {}.getType());
```
  Où la Person classe ressembler à ceci:
```
public class Person {
private String name;
private String address;
//Add or generate getters/setters.
}
```
  Laisser la servlet mettre dans la demande de la portée et de l'avant de JSP pour l'affichage comme suit:
```
request.setAttribute("persons", persons);
request.getRequestDispatcher("/WEB-INF/persons.jsp").forward(request, response);
```
  En JSP, l'utilisation de JSTL <c:forEach> pour itérer sur elle:
```
<%@ 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. Même que 2), vous avez aussi une variable Java, mais que vous souhaitez obtenir en Ajax dans les JSP. Ensuite créer une classe de Servlet qui effectue les opérations suivantes dans doGet() méthode:
```
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");
response.getWriter().write(jsonPersons);
```
  Et de l'appeler en Ajax de jQuery avec un rappel qui fait la même chose que 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));
});
});
});
```
- Oui je suis de construire mon tableau json chaîne à partir d'un POJO. la raison en est parce que j'ai deux clients. on le veut comme une chaîne json format et l'autre(le site web) veut-il que d'une table avec une liste des résultats. je vais mettre à jour mon OP. vérifier pour ma classe POJO
- Alors optez pour l'option 3. Utilisation Gson pour convertir List<Person> JSON comme String json = new Gson().toJson(persons); et de l'écrire à la réponse de servlet. Dans la page JSP, il suffit d'utiliser jQuery (ou plaine de Javascript) afin de créer un tableau HTML en dehors de ça.
- Salut, j'ai essayé ci-dessus et rien ne s'affiche sur l'écran
- Vérifier mon nouveau edit sur mon post original
- Cliquez avec le bouton droit de la page dans le navigateur et choisissez afficher la source. La syntaxe JSON look valide? Je parie qu'il ne l'est pas. Au moins, de se débarrasser de ces doublequotes.
- cool ok découvrez mon nouveau éditer à nouveau. cette fois, montrant comment ma sortie json ressemble
- Vous avez accès au JSON de la mauvaise façon (ou le JSON est construit dans le mauvais format). Le tableau JSON contient des objets avec une propriété FileObject qui contient à son tour un autre objet qui représente le fichier. Vous avez besoin de remplacer votre jQuery code d'accès du fichier de propriétés par file.FileObject.xxx au lieu de file.xxx.
- Vous êtes les bienvenus. Ne pas oublier de marquer le plus de réponse utile accepté. Voir aussi stackoverflow.com/faq
InformationsquelleAutor BalusC

En supposant que:

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

Une façon de le faire est de construire le code html dans le code Javascript comme ceci:

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

Maintenant afficher la chaîne HTML:

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

InformationsquelleAutor Andreas

Vous devez vous connecter pour publier un commentaire.