CrunchifyJSONtoHTML.js – Script convertidor de tabla JSON a HTML

Publicado: 2013-06-01

Conversión de JSON a HTML (demostración de Crunchify)

Recientemente me encontré con un requisito en el que tengo que representar los datos JSON en una vista HTML en JSP (básicamente JSON Array). Este es un script simple para convertir datos JSON a una tabla HTML estándar de la manera más simple y rápida.

  • Script de conversión de tabla JSON a HTML
  • Convierta datos json en una tabla html

Descargar .js

Descargar .css

He extendido mi ejemplo de Spring MVC 3.2.1 aquí para lograr este resultado. Aquí están los pasos.

Paso 1

Requisito previo: ejemplo de Hello World: Spring MVC 3.2.1 (implemente este ejemplo por completo before de continuar con el step-2 )

Paso 2

Necesitamos modificar 2 archivos: src/com.crunchify.controller/CrunchifyHelloWorld.java y WEB-INF/jsp/welcome.jsp

CrunchifyHelloWorld.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package com . crunchify . controller ;
 
import org . json . JSONArray ;
import org . json . JSONException ;
import org . springframework . stereotype . Controller ;
import org . springframework . ui . ModelMap ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RequestMethod ;
 
/**
* @author Crunchify.com
*
*/
 
@Controller
@RequestMapping ( "/welcome" )
public class CrunchifyHelloWorld {
 
@RequestMapping ( method = RequestMethod . GET )
public String printWelcome ( ModelMap model ) throws JSONException {
 
CrunchifyJSONtoHTML crunchify = new CrunchifyJSONtoHTML ( ) ;
JSONArray fileOutput = null ;
fileOutput = crunchify . getJSONArrayFromFile ( ) ;
model . addAttribute ( "jsonArr" , fileOutput ) ;
return "welcome" ;
}
}

welcome.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<% @ page language = "java" contentType = "text/html; charset=ISO-8859-1"
pageEncoding = "ISO-8859-1" %>
<% @ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
 
< html >
< head >
 
< title > Spring 3.2.1 MVC Example : Hello World - Crunchify . com < / title >
< meta rel = "author" href = "https://crunchify.com" content = "" >
<script src = "js/Crunchify.JSONtoHTML.js" type = "text/javascript" > </script>
<script src = "http://code.jquery.com/jquery-1.10.1.min.js"
type = "text/javascript" > </script>
< link href = "css/Crunchify.JSONtoHTML.css" rel = "stylesheet"
type = "text/css" / >
 
< / head >
 
< body >
 
<script type = "text/javascript" >
     $ ( document ) . ready ( function ( ) {
         //alert(${message});
         var myJsonArr = { "d" : { jsonArr } } ;    // please add $ before {jsonArr} - it's not visible bcoz of color scheme
$ ( '#CrunchifyLoading' ) . hide ( ) ;
$ ( '#Crunchify' ) . append ( CrunchifyTableView ( myJsonArr . d , "" ) ) . fadeIn ( ) ;
     } ) ;
     </script>
 
< form id = "form1" action = "" >
< div id = "Crunchify" align = "center" >
< div id = "CrunchifyLoading" > < / div >
< / div >
< / form >
 
< div align = "center" >
< div
style = "font-family: verdana; padding: 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;" >
 
JSON - > HTML Conversion Demo by < a href = 'https://crunchify.com' > Crunchify < / a > .
Click < a
href = 'https://crunchify.com/category/java-tutorials/' > here < / a >
for more than 150 examples . < br > < br > Demo created using
Simple < a
href = "https://crunchify.com/simplest-spring-mvc-hello-world-example-tutorial-spring-model-view-controller-tips/" > Spring
MVC framework < / a > . . .
< / div >
< / div >
< / body >
< / html >

Paso 3

Ahora agreguemos 3 files y creemos 2 folders .

  • Cree un archivo src/com.crunchify.controller/ CrunchifyJSONtoHTML.java
  • Cree 2 carpetas css y js en la carpeta /WebContent
  • Cree 2 archivos /css/Crunchify.JSONtoHTML.css y js/Crunchify.JSONtoHTML.js

Etapa 4

Aquí están los contenidos de los archivos respectivos:

CrunchifyJSONtoHTML.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package com . crunchify . controller ;
 
import org . json . JSONArray ;
import org . json . JSONException ;
import org . json . JSONObject ;
 
/**
* @author Crunchify.com
*
*/
 
public class CrunchifyJSONtoHTML {
 
public static void main ( String [ ] args ) {
// TO DO
}
 
public JSONArray getJSONArrayFromFile ( ) throws JSONException {
JSONObject jsonObj = new JSONObject ( ) ;
JSONObject jsonObj2 = new JSONObject ( ) ;
JSONObject jsonObj3 = new JSONObject ( ) ;
 
JSONArray jsonArr = new JSONArray ( ) ;
 
jsonObj . put ( "Name" , "eBay" ) ;
jsonObj . put ( "Phone" , "123-123-1234" ) ;
jsonObj . put ( "Address" , "Bay Area" ) ;
 
jsonObj2 . put ( "Name" , "Paypal" ) ;
jsonObj2 . put ( "Phone" , "345-345-3456" ) ;
jsonObj2 . put ( "Address" , "1st North First Street, San Jose" ) ;
 
jsonObj3 . put ( "Name" , "Google" ) ;
jsonObj3 . put ( "Phone" , "890-890-8909" ) ;
jsonObj3 . put ( "Address" , "Mountain View" ) ;
 
jsonArr . put ( jsonObj ) ;
jsonArr . put ( jsonObj2 ) ;
jsonArr . put ( jsonObj3 ) ;
return jsonArr ;
}
}

Crunchify.JSONtoHTML.css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
table a:link {
color : #666 ;
font-weight : bold ;
text-decoration : none ;
}
 
table a:visited {
color : #999999 ;
font-weight : bold ;
text-decoration : none ;
}
 
table a:active,table a:hover {
color : #bd5a35 ;
text-decoration : underline ;
}
 
table {
font-family : Arial, Helvetica, sans-serif ;
color : #000 ;
font-size : 12px ;
background : #eaebec ;
margin : 20px ;
border : #ccc 1px solid ;
-moz-border-radius : 3px ;
-webkit-border-radius : 3px ;
border-radius : 3px ;
-moz-box-shadow : 0 1px 2px #d1d1d1 ;
-webkit-box-shadow : 0 1px 2px #d1d1d1 ;
box-shadow : 0 1px 2px #d1d1d1 ;
margin-top : 50px ;
}
 
table th {
padding : 21px 25px 22px 25px ;
border-top : 1px solid #fafafa ;
border-bottom : 1px solid #787878 ;
background : #787878 ;
background : -webkit-gradient ( linear, left top, left bottom, from ( #787878 ) ,
to ( #ebebeb ) ) ;
background : -moz-linear-gradient ( top, #787878, #ebebeb ) ;
}
 
table th:first-child {
text-align : left ;
padding-left : 20px ;
}
 
table tr:first-child th:first-child {
-moz-border-radius-topleft : 3px ;
-webkit-border-top-left-radius : 3px ;
border-top-left-radius : 3px ;
}
 
table tr:first-child th:last-child {
-moz-border-radius-topright : 3px ;
-webkit-border-top-right-radius : 3px ;
border-top-right-radius : 3px ;
}
 
table tr {
text-align : center ;
padding-left : 20px ;
}
 
table td:first-child {
text-align : left ;
padding-left : 20px ;
border-left : 0 ;
}
 
table td {
padding : 10px 18px ;
border-top : 1px solid #ffffff ;
border-bottom : 1px solid #e0e0e0 ;
border-left : 1px solid #e0e0e0 ;
background : #fafafa ;
background : -webkit-gradient ( linear, left top, left bottom, from ( #fbfbfb ) ,
to ( #fafafa ) ) ;
background : -moz-linear-gradient ( top, #fbfbfb, #fafafa ) ;
text-align : left ;
}
 
table tr.even td {
background : #f6f6f6 ;
background : -webkit-gradient ( linear, left top, left bottom, from ( #f8f8f8 ) ,
to ( #f6f6f6 ) ) ;
background : -moz-linear-gradient ( top, #f8f8f8, #f6f6f6 ) ;
}
 
table tr:last-child td {
border-bottom : 0 ;
}
 
table tr:last-child td:first-child {
-moz-border-radius-bottomleft : 3px ;
-webkit-border-bottom-left-radius : 3px ;
border-bottom-left-radius : 3px ;
}
 
table tr:last-child td:last-child {
-moz-border-radius-bottomright : 3px ;
-webkit-border-bottom-right-radius : 3px ;
border-bottom-right-radius : 3px ;
}
 
table tr:hover td {
background : #f2f2f2 ;
background : -webkit-gradient ( linear, left top, left bottom, from ( #f2f2f2 ) ,
to ( #f0f0f0 ) ) ;
background : -moz-linear-gradient ( top, #f2f2f2, #f0f0f0 ) ;
}

Crunchify.JSONtoHTML.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function CrunchifyTableView ( objArray , theme ) {
 
     needHeader = true ;
 
     var array = typeof objArray ! = 'object' ? JSON . parse ( objArray ) : objArray ;
 
     var str = '<table class="' + theme + '">' ;
 
     // Only create table head if needHeader is set to True..
     if ( needHeader ) {
         str += '<thead><tr>' ;
         for ( var index in array [ 0 ] ) {
             str += '<th scope="col">' + index + '</th>' ;
         }
         str += '</tr></thead>' ;
     }
 
     // table body
     str += '<tbody>' ;
     for ( var i = 0 ; i < array . length ; i ++ ) {
         str += ( i % 2 == 0 ) ? '<tr class="alt">' : '<tr>' ;
         for ( var index in array [ i ] ) {
             str += '<td>' + array [ i ] [ index ] + '</td>' ;
         }
         str += '</tr>' ;
     }
     str += '</tbody>'
     str += '</table>' ;
     return str ;
}

Paso-5

Necesita el archivo json.jar . Descárgalo desde aquí. Póngalo en la ruta de compilación del proyecto.

O para el proyecto Maven, agregue la dependencia a continuación al archivo pom.xml

pom.xml
1
2
3
4
5
< dependency >
< groupId > org . json < / groupId >
< artifactId > json < / artifactId >
< version > 20090211 < / version >
< / dependency >

Aquí hay una estructura de proyecto final..

Spring MVC - Estructura de proyecto de ejemplo de JSON a HTML - Tutorial de Crunchify

Paso-6

Implemente su proyecto en Tomcat.

Paso-7

Dirija su navegador a esta URL: http://localhost:8080/CrunchifySpringMVC3.2.1/welcome.html y el resultado de pago.

Y ya está todo listo... Avíseme si se enfrentó a alguna excepción al crear esto...

Otro imprescindible dice:

  • ¿Cómo obtener el estado de ping de cualquier punto final HTTP en Java?
  • ¿Cómo ejecutar múltiples subprocesos simultáneamente en Java? Enfoque ExecutorService
  • Archivos de propiedades de Java: ¿Cómo actualizar el archivo config.properties en Java?