CrunchifyJSONtoHTML.js – Skrypt konwertera tabel JSON na HTML

Opublikowany: 2013-06-01

Konwersja JSON do HTML (demo Crunchify)

Ostatnio natknąłem się na wymaganie, w którym muszę renderować dane JSON do widoku HTML w JSP (Basically JSON Array). Jest to prosty skrypt do konwersji danych JSON na standardową tabelę HTML w najprostszy i najszybszy sposób.

  • Skrypt konwertera tabel JSON na HTML
  • Konwertuj dane json na tabelę html

Pobierz .js

Pobierz .css

Rozszerzyłem tutaj mój przykład Spring MVC 3.2.1 , aby osiągnąć ten wynik. Oto kroki.

Krok 1

Warunek wstępny: Przykład Hello World — Spring MVC 3.2.1 (zaimplementuj ten przykład całkowicie before przejściem do step-2 )

Krok 2

Musimy zmodyfikować 2 pliki: src/com.crunchify.controller/CrunchifyHelloWorld.java oraz 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 >

Krok 3

Dodajmy teraz 3 files i utwórzmy 2 folders .

  • Utwórz plik src/com.crunchify.controller/ CrunchifyJSONtoHTML.java
  • Utwórz 2 foldery css i js w folderze /WebContent
  • Utwórz 2 pliki /css/Crunchify.JSONtoHTML.css i js/Crunchify.JSONtoHTML.js

Krok 4

Oto zawartość odpowiednich plików:

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

Krok-5

Potrzebujesz pliku json.jar . Pobierz go stąd. Umieść go w ścieżce budowania projektu.

Lub dla projektu Maven dodaj poniższą zależność do pliku pom.xml

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

Oto ostateczna struktura projektu..

Spring MVC - Przykładowa struktura projektu JSON na HTML - samouczek Crunchify

Krok-6

Wdróż swój projekt w Tomcat.

Krok-7

Skieruj swoją przeglądarkę na ten adres URL: http://localhost:8080/CrunchifySpringMVC3.2.1/welcome.html i wynik kasy.

I wszystko gotowe. Daj mi znać, jeśli napotkałeś wyjątek podczas tworzenia tego..

Inny musi brzmi:

  • Jak uzyskać status ping dowolnego punktu końcowego HTTP w Javie?
  • Jak uruchomić wiele wątków jednocześnie w Javie? Podejście Wykonawcy
  • Pliki właściwości Java: jak zaktualizować plik config.properties w języku Java?