Little changes in json formatter. (#83)
Co-authored-by: Artur Kołecki <koleckiartur@icloud.com> Reviewed-on: R11/release11-tools-web#83
This commit is contained in:
@@ -1,29 +1,39 @@
|
||||
function formatAndValidateJson(errorElement) {
|
||||
const input = document.querySelector('#jsonBlock');
|
||||
const errorOutput = document.getElementById(errorElement);
|
||||
const processInfo = document.getElementById(errorElement);
|
||||
|
||||
try {
|
||||
const start = new Date();
|
||||
|
||||
const obj = JSON.parse(input.textContent);
|
||||
input.innerHTML = JSON.stringify(obj, null, 2);
|
||||
errorOutput.innerText = "";
|
||||
processInfo.innerText = "";
|
||||
hljs.highlightElement(input);
|
||||
|
||||
const end = new Date();
|
||||
processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
|
||||
} catch (error) {
|
||||
errorOutput.innerText = error;
|
||||
processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
|
||||
console.error("Error: ", error)
|
||||
}
|
||||
}
|
||||
|
||||
function minimizeJson(errorElement) {
|
||||
const input = document.querySelector('#jsonBlock');
|
||||
const errorOutput = document.getElementById(errorElement);
|
||||
const processInfo = document.getElementById(errorElement);
|
||||
|
||||
try {
|
||||
const start = new Date();
|
||||
|
||||
const obj = JSON.parse(input.textContent);
|
||||
input.innerHTML = JSON.stringify(obj);
|
||||
errorOutput.innerText = "";
|
||||
processInfo.innerText = "";
|
||||
hljs.highlightElement(input);
|
||||
|
||||
const end = new Date();
|
||||
processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
|
||||
} catch (error) {
|
||||
errorOutput.innerText = error;
|
||||
processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
|
||||
console.error("Error: ", error)
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||
<script src="../assets/scripts/tools/scripts.js"></script>
|
||||
<script src="../assets/scripts/tools/json.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -21,7 +22,7 @@
|
||||
<h1>Online JSON Formatter</h1>
|
||||
</div>
|
||||
|
||||
<p style="color: red" id="error"></p>
|
||||
<p style="margin-bottom: -30px" id="processInfo"></p>
|
||||
|
||||
<pre>
|
||||
<code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
|
||||
@@ -29,11 +30,11 @@
|
||||
|
||||
<button style="margin-top: 20px"
|
||||
class="max-width block-label action-button active"
|
||||
onclick="formatAndValidateJson('error')"
|
||||
onclick="formatAndValidateJson('processInfo')"
|
||||
>Prettify JSON</button>
|
||||
|
||||
<button class="max-width block-label action-button active"
|
||||
onclick="minimizeJson('error')"
|
||||
onclick="minimizeJson('processInfo')"
|
||||
>Minimize JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user