Created json formatter and validator. #82
29
Frontend/assets/scripts/tools/json.js
Normal file
29
Frontend/assets/scripts/tools/json.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
function formatAndValidateJson(errorElement) {
|
||||||
|
const input = document.querySelector('#jsonBlock');
|
||||||
|
const errorOutput = document.getElementById(errorElement);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const obj = JSON.parse(input.textContent);
|
||||||
|
input.innerHTML = JSON.stringify(obj, null, 2);
|
||||||
|
errorOutput.innerText = "";
|
||||||
|
hljs.highlightElement(input);
|
||||||
|
} catch (error) {
|
||||||
|
errorOutput.innerText = error;
|
||||||
|
console.error("Error: ", error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function minimizeJson(errorElement) {
|
||||||
|
const input = document.querySelector('#jsonBlock');
|
||||||
|
const errorOutput = document.getElementById(errorElement);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const obj = JSON.parse(input.textContent);
|
||||||
|
input.innerHTML = JSON.stringify(obj);
|
||||||
|
errorOutput.innerText = "";
|
||||||
|
hljs.highlightElement(input);
|
||||||
|
} catch (error) {
|
||||||
|
errorOutput.innerText = error;
|
||||||
|
console.error("Error: ", error)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -43,6 +43,10 @@ function setDefaultContent(element, text) {
|
|||||||
element.style.color = color_grey;
|
element.style.color = color_grey;
|
||||||
element.value = text;
|
element.value = text;
|
||||||
}
|
}
|
||||||
|
if (id == "jsonArea") {
|
||||||
|
element.style.color = color_grey;
|
||||||
|
element.value = text;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -25,7 +25,8 @@
|
|||||||
<li id="toolListRow"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
|
<li id="toolListRow"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
|
||||||
<li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
|
<li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
|
||||||
<li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
|
<li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
|
||||||
<li id="toolListRow"><a href="./tools/formatter.html" target="iframe">Formatter</a></li>
|
<li id="toolListRow"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
|
||||||
|
<li id="toolListRow"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div id="copyright">Copyright © 2023<br><a href="http://release11.com/">Release11 Sp. z. o. o.</a></div>
|
<div id="copyright">Copyright © 2023<br><a href="http://release11.com/">Release11 Sp. z. o. o.</a></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
79
Frontend/tools/jsonFormatter.html
Normal file
79
Frontend/tools/jsonFormatter.html
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
|
||||||
|
<script src="../assets/scripts/tools/scripts.js"></script>
|
||||||
|
<script src="../assets/scripts/tools/json.js"></script>
|
||||||
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<script>hljs.highlightAll();</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body onload="init();">
|
||||||
|
<div class="container">
|
||||||
|
<div id="tool" class="tool rwd-expandable">
|
||||||
|
<div class="tool-context">
|
||||||
|
<div class="headline">
|
||||||
|
<h1>Online JSON Formatter <span class="versionInfo"><span class="version-span">v0.0.1 BETA</span></span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 style="color: red" id="error"></h4>
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
<code class="hightlight-json jsonBlock" style="height: 600px; width: 1000px;" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<!-- <label for="jsonArea"><b>Insert your JSON:</b></label>
|
||||||
|
<textarea id="jsonArea"
|
||||||
|
name="jsonArea"
|
||||||
|
rows="15"
|
||||||
|
class="textarea-700 bordered-field vertically-resizeable max-width"></textarea>-->
|
||||||
|
|
||||||
|
<button style="margin-top: 20px"
|
||||||
|
class="max-width block-label action-button active"
|
||||||
|
onclick="formatAndValidateJson('error')">
|
||||||
|
Prettify XML
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="max-width block-label action-button active"
|
||||||
|
onclick="minimizeJson('error')">
|
||||||
|
Minimize XML
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tooltip-window rwd-hideable">
|
||||||
|
<h2>What is this?</h2>
|
||||||
|
<p>This tool has 2 main functions:
|
||||||
|
<ul>
|
||||||
|
<li><strong>Prettify JSON</strong> to make it human-readable (add indentation etc.)</li>
|
||||||
|
<li><strong>Minimize JSON</strong> to make it more compact (exactly opposite to above)</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const textArea = document.querySelector('#textArea');
|
||||||
|
textArea.addEventListener('input', function() {
|
||||||
|
textArea.innerHTML = hljs.highlight('json', textArea.value).value;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function init() {
|
||||||
|
//Handle clicks in whole form and set info in tooltip
|
||||||
|
setDefaultContent(document.getElementById("jsonArea"), 'Insert JSON here');
|
||||||
|
console.log("init")
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user