CrunchifyJSONtoHTML.js – Script de conversão de JSON para tabela HTML

Publicados: 2013-06-01

Conversão de JSON para HTML (Demonstração do Crunchify)

Recentemente me deparei com um requisito em que tenho que renderizar dados JSON para visualização HTML em JSP (Basicamente JSON Array). Este é um script simples para converter dados JSON em tabela HTML padrão da maneira mais simples e rápida.

  • Script conversor de JSON para tabela HTML
  • Converter dados json em uma tabela html

Baixar .js

Baixar .css

Estendi meu exemplo Spring MVC 3.2.1 aqui para obter esse resultado. Aqui estão os passos.

Passo 1

Pré-requisito: Exemplo Hello World – Spring MVC 3.2.1 (implementar este exemplo completamente before de prosseguir para a step-2 )

Passo 2

Precisamos modificar 2 arquivos: src/com.crunchify.controller/CrunchifyHelloWorld.java e 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 >

Etapa 3

Agora vamos adicionar 3 files e criar 2 folders .

  • Crie um arquivo src/com.crunchify.controller/ CrunchifyJSONtoHTML.java
  • Crie 2 pastas css e js na pasta /WebContent
  • Crie 2 arquivos /css/Crunchify.JSONtoHTML.css e js/Crunchify.JSONtoHTML.js

Passo 4

Aqui estão os conteúdos para os respectivos arquivos:

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

Passo-5

Você precisa do arquivo json.jar . Faça o download daqui. Coloque-o no caminho de construção do projeto.

Ou para o projeto Maven, adicione abaixo a dependência ao arquivo pom.xml

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

Aqui está uma estrutura final do projeto ..

Spring MVC - Estrutura de projeto de exemplo de JSON para HTML - Tutorial Crunchify

Passo-6

Implante seu projeto no Tomcat.

Passo-7

Aponte seu navegador para este URL: http://localhost:8080/CrunchifySpringMVC3.2.1/welcome.html e faça o checkout.

E você está pronto .. Deixe-me saber se você enfrentou alguma exceção ao criar isso ..

Outro deve ler:

  • Como obter o status de ping de qualquer ponto final HTTP em Java?
  • Como executar vários threads simultaneamente em Java? Abordagem de serviço executor
  • Arquivos de propriedades Java: Como atualizar o arquivo config.properties em Java?