Домой Учебники по JSON CrunchifyJSONtoHTML.js — Конвертер сценариев JSON в HTML

CrunchifyJSONtoHTML.js — Конвертер сценариев JSON в HTML

717
0

Недавно я столкнулся с требованием, согласно которому я должен рендерить данные JSON в представление HTML в JSP (в основном JSON Array). Это простой скрипт для преобразования данных JSON в стандартную таблицу HTML самым простым и быстрым способом.

  • Скрипт JSON в HTML
  • Перерабатывать json данные к html Таблица

Скачать .js

Скачать .css

Я продлил Spring MVC 3.2.1 Пример здесь, чтобы достичь этого результата. Вот шаги.

Шаг 1

Предварительное требование: Пример Hello World — Spring MVC 3.2.1 (полностью реализовать этот пример before вы приступаете к step-2 )

Шаг 2

Нам нужно изменить 2 файла: src/com.crunchify.controller/CrunchifyHelloWorld.java а также WEB-INF/jsp/welcome.jsp

CrunchifyHelloWorld.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
пакет ком . crunchify. контроллер ;
Импортировать орг. JSON . JSONArray ;
Импортировать орг. JSON . JSONException ;
Импортировать орг. пружинная рама . стереотип . Контроллер ;
Импортировать орг. пружинная рама . щ. ModelMap ;
Импортировать орг. пружинная рама . веб . привязывать. аннотация . RequestMapping ;
Импортировать орг. пружинная рама . веб . привязывать. аннотация . RequestMethod ;
/ **
* @author Crunchify.com
*
* /
@Controller
@RequestMapping ( / welcome )
общественности учебный класс CrunchifyHelloWorld {
@RequestMapping ( метод знак равно RequestMethod . ПОЛУЧИТЬ )
общественности строка printWelcome ( модель ModelMap ) бросает JSONException {
CrunchifyJSONtoHTML crunchify знак равно новый CrunchifyJSONtoHTML ( ) ;
JSONArray fileOutput знак равно ноль ;
fileOutput знак равно crunchify. getJSONArrayFromFile ( ) ;
модель . addAttribute ( jsonArr , fileOutput ) ;
вернуть добро пожаловать ;
}
}
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
<% @ страница language = java contentType = text / html; charset = ISO-8859-1
pageEncoding = ISO-8859-1 %>
<% @ taglib префикс = с uri = http://java.sun.com/jsp/jstl/core %>
< ! DOCTYPE html ПУБЛИЧНЫЙ — // W3C // DTD HTML 4.01 Transitional // EN http://www.w3.org/TR/html4/loose.dtd >
< html >
< голова >
< title > Весна 3.2.1 Пример MVC : Привет мир — Crunchify. ком < / title >
< meta rel = author href = https://crunchify.com content = >
src = js / Crunchify.JSONtoHTML.js type = text / javascript >
src = http://code.jquery.com/jquery-1.10.1.min.js
type = text / javascript >
< link href = css / Crunchify.JSONtoHTML.css rel = stylesheet
type = text / css / >
< / head >
< тело >
type = text / javascript >
     $ ( документ ) . готов ( функция ( ) {
         // предупреждение ($ {сообщение});
         вар myJsonArr знак равно { д : { jsonArr } } ;    // пожалуйста, добавьте $ перед {jsonArr} — это не видно bcoz цветовой схемы
$ ( '#CrunchifyLoading' ) . скрыть ( ) ;
$ ( '#Crunchify' ) . append ( CrunchifyTableView ( myJsonArr . d , ) ) . fadeIn ( ) ;
     } ) ;
    
< form id = form1 action = >
< div id = Crunchify выровнять = центр >
< div id = CrunchifyLoading > < / div >
< / div >
< / form >
< div align = center >
< div
style = font-family: verdana; отступ: 10px; border-radius: 10px; border: 3px solid # EE872A; ширина: 50%; размер шрифта: 12px; >
JSON — > HTML Conversion Demo путем < а href = 'https://crunchify.com' > Crunchify < / a > .
Нажмите < а
href = 'https://crunchify.com/category/java-tutorials/' > здесь < / a >
за больше чем 150 примеры . <Бр> <Бр> Демо создано с использованием
просто < а
href = https://crunchify.com/simplest-spring-mvc-hello-world-example-tutorial-spring-model-view-controller-tips/ > Spring
MVC рамки а>. , ,
< / div >
< / div >
< / body >
< / html >

Шаг 3

Теперь давайте добавим 3 files и создать 2 folders ,

  • Создайте файл src / com.crunchify.controller / CrunchifyJSONtoHTML.java
  • Создать 2 папки css а также js под /WebContent папка
  • Создать 2 файла /css/Crunchify.JSONtoHTML.css а также / js/Crunchify.JSONtoHTML.js

Шаг 4

Вот содержимое для соответствующих файлов:

CrunchifyJSONtoHTML.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
пакет ком . crunchify. контроллер ;
Импортировать орг. JSON . JSONArray ;
Импортировать орг. JSON . JSONException ;
Импортировать орг. JSON . JSONObject ;
/ **
* @author Crunchify.com
*
* /
общественности учебный класс CrunchifyJSONtoHTML {
общественности статический недействительным main ( Строка [ ] аргументы ) {
// СДЕЛАТЬ
}
общественности JSONArray getJSONArrayFromFile ( ) бросает JSONException {
JSONObject jsonObj знак равно новый JSONObject ( ) ;
JSONObject jsonObj2 знак равно новый JSONObject ( ) ;
JSONObject jsonObj3 знак равно новый JSONObject ( ) ;
JSONArray jsonArr знак равно новый JSONArray ( ) ;
jsonObj . поставить ( «Имя» , eBay ) ;
jsonObj . положить ( «Телефон» , «123-123-1234» ) ;
jsonObj . поставить ( «Адрес» , Зона залива ) ;
jsonObj2 . поставить ( «Имя» , «Paypal» ) ;
jsonObj2 . положить ( «Телефон» , «345-345-3456» ) ;
jsonObj2 . поставить ( «Адрес» , 1-я Северная Первая улица, Сан-Хосе ) ;
jsonObj3 . поставить ( «Имя» , Гугл ) ;
jsonObj3 . положить ( «Телефон» , «890-890-8909» ) ;
jsonObj3 . поставить ( «Адрес» , Маунтин-Вью ) ;
JsonArr . положить ( jsonObj ) ;
JsonArr . положить ( jsonObj2 ) ;
JsonArr . положить ( jsonObj3 ) ;
вернуть 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
таблица а: ссылка {
цвет : # 666 ;
Вес шрифта : жирный ;
текстовое оформление : нет ;
}
Таблица а: посетил {
цвет : # 999999 ;
Вес шрифта : жирный ;
текстовое оформление : нет ;
}
таблица a: активная, таблица a: hover {
цвет : # bd5a35 ;
текстовое оформление : подчеркнуть ;
}
таблица {
семейство шрифтов : Arial, Helvetica, без засечек ;
цвет : # 000 ;
размер шрифта : 12 пикселей ;
фон : #eaebec ;
поле : 20 пикселей ;
граница : #ccc 1px твердое тело ;
-moz-border-radius : 3 пикселя ;
-webkit-border-radius : 3 пикселя ;
пограничный радиус : 3 пикселя ;
-moz-box-shadow : 0 1px 2px # d1d1d1 ;
-webkit-box-shadow : 0 1px 2px # d1d1d1 ;
коробка-тень : 0 1px 2px # d1d1d1 ;
на полях : 50 пикселей ;
}
таблица й {
набивка : 21px 25px 22px 25 пикселей ;
граница вершины : 1px твердый #fafafa ;
граница дна : 1px твердый # 787878 ;
фон : # 787878 ;
фон : -Вебкит-градиент ( линейный, оставил Топ, оставил низ, от ( # 787878 ) ,
к ( #ebebeb ) ) ;
фон : -моз-линейно-градиентный ( верх, # 787878, #ebebeb ) ;
}
таблица th: первый ребенок {
выравнивание текста : слева ;
отступ слева : 20 пикселей ;
}
таблица tr: первый ребенок th: первый ребенок {
-moz-border-radius-topleft : 3 пикселя ;
-webkit-border-top-left-radius : 3 пикселя ;
border-top-left-radius : 3 пикселя ;
}
таблица tr: первый ребенок th: последний ребенок {
-moz-border-radius-topright : 3 пикселя ;
-webkit-border-top-right-radius : 3 пикселя ;
border-top-right-radius : 3 пикселя ;
}
таблица tr {
выравнивание текста : центр ;
отступ слева : 20 пикселей ;
}
таблица td: first-child {
выравнивание текста : слева ;
отступ слева : 20 пикселей ;
граница слева : 0 ;
}
таблица тд {
набивка : 10px 18 пикселей ;
граница вершины : 1px твердый #ffffff ;
граница дна : 1px твердый # e0e0e0 ;
граница слева : 1px твердый # e0e0e0 ;
фон : #fafafa ;
фон : -Вебкит-градиент ( линейный, оставил Топ, оставил низ, от ( #fbfbfb ) ,
к ( #fafafa ) ) ;
фон : -моз-линейно-градиентный ( верх, #fbfbfb, #fafafa ) ;
выравнивание текста : слева ;
}
таблица tr.even td {
фон : # f6f6f6 ;
фон : -Вебкит-градиент ( линейный, оставил Топ, оставил низ, от ( # f8f8f8 ) ,
к ( # f6f6f6 ) ) ;
фон : -моз-линейно-градиентный ( верх, # f8f8f8, # f6f6f6 ) ;
}
таблица tr: последний ребенок td {
граница дна : 0 ;
}
таблица tr: последний-ребенок td: first-child {
-moz-border-radius-bottomleft : 3 пикселя ;
-webkit-border-bottom-left-radius : 3 пикселя ;
border-bottom-left-radius : 3 пикселя ;
}
таблица tr: последний-ребенок td: last-child {
-moz-border-radius-bottomright : 3 пикселя ;
-webkit-border-bottom-right-radius : 3 пикселя ;
граница-нижний-правый-радиус : 3 пикселя ;
}
таблица tr: hover td {
фон : # f2f2f2 ;
фон : -Вебкит-градиент ( линейный, оставил Топ, оставил низ, от ( # f2f2f2 ) ,
к ( # f0f0f0 ) ) ;
фон : -моз-линейно-градиентный ( верх, # 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
функция CrunchifyTableView ( objArray , тема ) {
     needHeader знак равно правда ;
     вар массив знак равно тип objArray ! знак равно «объект» ? JSON . parse ( objArray ) : objArray ;
     вар ул знак равно '

+ тема + '>';
     // Создать заголовок таблицы, только если для NeedHeader установлено значение True ..
     если ( NeedHeader ) {
         ул + = '

';
         за ( вар индекс в массив [ 0 ] ) {
             ул + = '

';
     за ( вар я знак равно 0 ; я < массив . длина ; я ++ ) {
         ул + = ( я % 2 == 0 ) ? '

' : '

';
         за ( вар индекс в массив [ i ] ) {
             ул + =
' + индекс + '' ;
         }
         ул + = ' ' ;
     }
     // тело таблицы
     ул + = '
' + массив [ i ] [ индекс ] + '' ;
         }
         ул + = '' ;
     }
     ул + = '
     ул + = '' ;
     вернуть ул ;
}

Шаг 5

Тебе нужно json.jar файл. Загрузите его отсюда . Поместите его в путь сборки проекта.

Или для проекта Maven добавьте ниже зависимость к pom.xml файл

pom.xml

1
2
3
4
5
< зависимость >
< groupId > org . JSON идентификатор_группы>
< artifactId > json < / artifactId >
< версия > 20090211 < / версия >
< / зависимость >

Вот окончательная структура проекта ..

Шаг 6

Разверните свой проект в Tomcat .

Шаг 7

Укажите в браузере этот URL: http: // localhost: 8080 / CrunchifySpringMVC3.2.1 / welcome.html и результат проверки.

И все готово. Дайте мне знать, если вы столкнулись с каким-либо исключением при создании этого ..

Другой должен читать:

CrunchifyJSONtoHTML.js — Конвертер сценариев JSON в HTML

0.00 (0%) 0 votes

ЧИТАТЬ ТАКЖЕ:  Java JsonGenerator - API обработки JSON и как включить вывод в формате JSON для симпатичной печати (Gson + Jackson)

ЭТО МОЖЕТ БЫТЬ ИНТЕРЕСНОЕЩЕ ОТ АВТОРА

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

Актуальный новостной блог. Мы публикуем ежедневно обзор самых важных событий в мире и России, новости технологий и автомобилестроения, экономики и политики, шоу бизнеса и спорта
Facebook Instagram Twitter Youtube

ЕЩЁ БОЛЬШЕ НОВОСТЕЙ

ПОПУЛЯРНЫЕ КАТЕГОРИИ

© Csharpcoderr.com