CrunchifyJSONtoHTML.js – JSON을 HTML 테이블로 변환하는 스크립트

게시 됨: 2013-06-01

JSON에서 HTML로의 변환(Crunchify 데모)

최근에 JSP(기본적으로 JSON 배열)에서 JSON 데이터를 HTML 보기로 렌더링해야 하는 요구 사항을 발견했습니다. 이것은 가장 간단하고 빠른 방법으로 JSON 데이터를 표준 HTML 테이블로 변환하는 간단한 스크립트입니다.

  • JSON-HTML 테이블 변환기 스크립트
  • json 데이터를 html 테이블로 변환

.js 다운로드

.css 다운로드

이 결과를 얻기 위해 여기에서 Spring MVC 3.2.1 예제를 확장했습니다. 다음은 단계입니다.

1 단계

사전 요구 사항: Hello World 예제 – Spring MVC 3.2.1( step-2 진행 before 이 예제를 완전히 구현하십시오)

2 단계

2개의 파일을 수정해야 합니다: src/com.crunchify.controller/CrunchifyHelloWorld.java 및 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 >

3단계

이제 3 files 을 추가하고 2 folders 를 생성해 보겠습니다.

  • src/com.crunchify.controller/ CrunchifyJSONtoHTML.java 파일 생성
  • /WebContent 폴더 아래에 2개의 css 및 js 폴더 생성
  • /css/Crunchify.JSONtoHTML.css 및 js/Crunchify.JSONtoHTML.js 파일 2개 생성

4단계

각 파일의 내용은 다음과 같습니다.

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

5단계

json.jar 파일이 필요합니다. 여기에서 다운로드하십시오. 프로젝트 빌드 경로에 넣으십시오.

또는 Maven 프로젝트의 경우 pom.xml 파일에 아래 종속성을 추가하십시오.

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

다음은 최종 프로젝트 구조입니다.

Spring MVC - JSON to HTML 예제 프로젝트 구조 - Crunchify 튜토리얼

6단계

프로젝트를 Tomcat에 배포합니다.

7단계

브라우저에서 http://localhost:8080/CrunchifySpringMVC3.2.1/welcome.html 및 체크아웃 결과로 이동합니다.

모든 설정이 완료되었습니다. 이 작업을 수행하는 동안 예외가 발생했다면 알려주세요.

다른 사람은 다음을 읽어야 합니다.

  • Java에서 HTTP 끝점의 Ping 상태를 얻는 방법은 무엇입니까?
  • Java에서 동시에 여러 스레드를 실행하는 방법은 무엇입니까? ExecutorService 접근 방식
  • Java 속성 파일: Java에서 config.properties 파일을 업데이트하는 방법은 무엇입니까?