CrunchifyJSONtoHTML.js –JSONからHTMLへのテーブルコンバータスクリプト

公開: 2013-06-01

JSONからHTMLへの変換（Crunchifyデモ）

最近、JSONデータをJSP（基本的には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

src/com.crunchify.controller/CrunchifyHelloWorld.javaとWEB-INF/jsp/welcome.jsp /welcome.jspの2つのファイルを変更する必要があります

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フォルダーの下にcssとjsの2つのフォルダーを作成します
  • 2つのファイル/css/Crunchify.JSONtoHTML.cssとjs/Crunchify.JSONtoHTML.jsを作成します

ステップ-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 >

これが最終的なプロジェクト構造です。

SpringMVC-JSONからHTMLへのサンプルプロジェクト構造-Crunchifyチュートリアル

ステップ-6

プロジェクトをTomcatにデプロイします。

ステップ-7

ブラウザで次のURLを指定します：http：// localhost：8080 / CrunchifySpringMVC3.2.1 /welcome.htmlそしてチェックアウト結果。

これで準備は完了です。これを作成しているときに例外が発生した場合はお知らせください。

別の必読：

  • JavaでHTTPエンドポイントのPingステータスを取得するにはどうすればよいですか？
  • Javaで複数のスレッドを同時に実行する方法は？ ExecutorServiceアプローチ
  • Javaプロパティファイル：Javaでconfig.propertiesファイルを更新する方法は？