Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
typescript
json2html
Commits
69a884f1
Commit
69a884f1
authored
Oct 18, 2020
by
Zéfling
🎨
Browse files
Add a dynamic demo
parent
ac06bbaf
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/app/app.component.html
View file @
69a884f1
<h1>
json2html-lib
</h1>
<div>
<button
type=
"button"
(click)=
"updateExample(1)"
>
Example 1
</button>
<button
type=
"button"
(click)=
"updateExample(2)"
>
Example 2
</button>
</div>
<main>
<fieldset
class=
"json"
>
<legend>
json
</legend>
<textarea
(change)=
"format($event.target.value)"
>
{{data | json}}
</textarea>
</fieldset>
<fieldset
class=
"options"
>
<legend>
options
</legend>
<div>
<label>
<span>
formatting
</span>
<select
[value]=
"formatting"
(change)=
"formatting = $event.target.value; generated()"
>
<option
value=
"multiline"
>
multiline (defaut): structure sur plusieur lignes avec indentation
possible
</option>
<option
value=
"inline"
>
inline: all on one line without space
</option>
</select>
</label>
<label
*ngIf=
"formatting === 'multiline'"
>
<span>
indent
</span>
<input
type=
"checkbox"
[checked]=
"indent"
(change)=
"indent = $event.target.checked; generated()"
>
</label>
<label
*ngIf=
"indent && formatting === 'multiline'"
>
<span>
spaceType
</span>
<select
[value]=
"spaceType"
(change)=
"spaceType = $event.target.value; generated()"
>
<option
value=
"space"
>
space (defaut)
</option>
<option
value=
"tab"
>
tab
</option>
</select>
</label>
<label
*ngIf=
"indent && formatting === 'multiline'"
>
<span>
spaceLength
</span>
<input
[value]=
"spaceLength"
type=
"number"
min=
"0"
(change)=
"spaceLength = $event.target.value; generated()"
>
</label>
<label
*ngIf=
"indent && formatting === 'multiline'"
>
<span>
spaceBase
</span>
<input
[value]=
"spaceBase"
type=
"number"
min=
"0"
(change)=
"spaceBase = $event.target.value; generated()"
>
</label>
<label
*ngIf=
"indent && formatting === 'multiline'"
>
<span>
attrPosition
</span>
<select
[value]=
"attrPosition"
(change)=
"attrPosition = $event.target.value; generated()"
>
<option
value=
"space"
>
inline: no alignment
</option>
<option
value=
"space"
>
space: alignment with higher level
</option>
<option
value=
"alignTag"
>
alignTag: alignment with the tag
</option>
<option
value=
"alignFirstAttr"
>
alignFirstAttr (default): alignment with the first attribute
</option>
</select>
</label>
<label>
<span>
type
</span>
<select
[value]=
"type"
(change)=
"type = $event.target.value; generated()"
>
<option
value=
"html"
>
html (default)
</option>
<option
value=
"xml"
>
xml
</option>
</select>
</label>
<label>
<span>
xmlDefaultTag
</span>
<input
type=
"text"
[value]=
"xmlDefaultTag"
(change)=
"xmlDefaultTag = $event.target.value; generated()"
>
</label>
<label>
<span>
noContentTags
</span>
<input
type=
"text"
[value]=
"noContentTags"
(change)=
"noContentTags = $event.target.value; generated()"
>
</label>
</div>
</fieldset>
<fieldset
class=
"rendu"
>
<legend>
Rendu
</legend>
<textarea>
{{html}}
</textarea>
</fieldset>
</main>
<footer>
<a
href=
"https://git.ikilote.net/angular/json2html"
>
Source code
</a>
</footer>
\ No newline at end of file
src/app/app.component.scss
View file @
69a884f1
::ng-deep
{
:root
{
}
body
{
font-family
:
sans
;
}
*
{
box-sizing
:
border-box
;
}
}
main
{
display
:
grid
;
grid-template
:
"a b c"
/
2fr
2fr
2fr
;
}
form
{
flex
:
3
;
}
aside
{
flex
:
2
;
padding
:
0
15px
}
textarea
{
width
:
100%
;
min-height
:
350px
;
}
input
:not
([
type
=
"checkbox"
])
:not
([
type
=
"radio"
]),
select
{
width
:
100%
;
}
label
{
display
:
block
;
&
>
span
{
display
:
block
;
font-weight
:
700
;
}
}
\ No newline at end of file
src/app/app.component.ts
View file @
69a884f1
import
{
Component
}
from
'
@angular/core
'
;
import
{
Json2html
}
from
'
projects/json2html/src/public_api
'
;
import
{
Json2html
,
Json2htmlRef
,
Json2htmlOptions
}
from
'
projects/json2html/src/public_api
'
;
import
{
examples
}
from
'
./app.json
'
;
@
Component
({
selector
:
'
app-root
'
,
...
...
@@ -9,60 +11,69 @@ import { Json2html } from 'projects/json2html/src/public_api';
})
export
class
AppComponent
{
// options
spaceType
:
'
space
'
|
'
tab
'
=
'
space
'
;
spaceLength
=
4
;
spaceBase
=
0
;
// maxLenght= 0;
attrPosition
:
'
inline
'
|
'
space
'
|
'
alignTag
'
|
'
alignFirstAttr
'
=
'
alignFirstAttr
'
;
type
:
'
html
'
|
'
xml
'
=
'
html
'
;
formatting
:
'
inline
'
|
'
multiline
'
=
'
multiline
'
;
indent
=
true
;
xmlDefaultTag
=
'
span
'
;
noContentTags
=
[
'
area
'
,
'
base
'
,
'
br
'
,
'
col
'
,
'
command
'
,
'
embed
'
,
'
hr
'
,
'
img
'
,
'
input
'
,
'
keygen
'
,
'
link
'
,
'
meta
'
,
'
param
'
,
'
source
'
,
'
track
'
,
'
wbr
'
].
toString
();
data
:
Json2htmlRef
|
Json2htmlRef
[];
html
:
string
;
constructor
()
{
this
.
updateExample
(
1
);
}
console
.
log
(
new
Json2html
(
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test1
'
,
class
:
'
testclasse
'
},
body
:
[
'
test
'
,
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test2
'
,
class
:
'
foobar
'
},
body
:
'
test
'
}
]
}
,
{
formatting
:
'
multiline
'
}).
toString
());
updateExample
(
number
:
number
)
{
this
.
data
=
examples
[
number
];
this
.
generated
();
}
format
(
json
:
string
)
{
try
{
this
.
data
=
JSON
.
parse
(
json
);
}
catch
(
error
)
{
console
.
error
(
error
);
}
}
console
.
log
(
new
Json2html
([{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test
'
,
class
:
'
testclasse
'
,
test
:
null
},
body
:
[
'
test
'
,
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test-div
'
,
class
:
'
foo
'
},
body
:
[
'
test2
'
,
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test-subdiv
'
,
class
:
'
foobar
'
},
body
:
'
test3
'
}
]
},
{
tag
:
'
hr
'
},
{
tag
:
'
span
'
,
attrs
:
{
id
:
'
test-span
'
,
class
:
'
bar
'
},
body
:
[
'
test2
'
]
}
]
},
{
tag
:
'
span
'
,
attrs
:
{
id
:
'
attr-2
'
,
class
:
'
bar
'
},
body
:
[
'
test2
'
]
}],
{
spaceBase
:
5
,
type
:
'
xml
'
}).
toString
());
generated
()
{
const
options
:
Json2htmlOptions
=
{
spaceType
:
this
.
spaceType
,
spaceLength
:
this
.
spaceLength
,
spaceBase
:
this
.
spaceBase
,
attrPosition
:
this
.
attrPosition
,
type
:
this
.
type
,
formatting
:
this
.
formatting
,
indent
:
this
.
indent
,
xmlDefaultTag
:
this
.
xmlDefaultTag
,
noContentTags
:
this
.
noContentTags
.
split
(
'
,
'
)
};
console
.
log
(
options
);
this
.
html
=
new
Json2html
(
this
.
data
,
options
).
toString
();
}
}
src/app/app.json.ts
0 → 100644
View file @
69a884f1
export
const
examples
=
[
,
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test1
'
,
class
:
'
testclasse
'
},
body
:
[
'
test
'
,
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test2
'
,
class
:
'
foobar
'
},
body
:
'
test
'
}
]
},
[
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test
'
,
class
:
'
testclasse
'
,
test
:
null
},
body
:
[
'
test
'
,
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test-div
'
,
class
:
'
foo
'
},
body
:
[
'
test2
'
,
{
tag
:
'
div
'
,
attrs
:
{
id
:
'
test-subdiv
'
,
class
:
'
foobar
'
},
body
:
'
test3
'
}
]
},
{
tag
:
'
hr
'
},
{
tag
:
'
span
'
,
attrs
:
{
id
:
'
test-span
'
,
class
:
'
bar
'
},
body
:
[
'
test2
'
]
}
]
},
{
tag
:
'
span
'
,
attrs
:
{
id
:
'
attr-2
'
,
class
:
'
bar
'
},
body
:
[
'
test2
'
]
}
]
];
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment