Skip to content

Commit f3b0709

Browse files
softwaredeveloperhub01softwaredeveloperhub01
committed
JSON Formatter - initial
1 parent b05cbf6 commit f3b0709

File tree

2 files changed

+132
-0
lines changed

2 files changed

+132
-0
lines changed

‎index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="no-js">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<meta lang="en" name="title" content="Free JSON Formatter &amp; JSON Validator" />
9+
<meta name="author" content="Github- Parth Raval">
10+
<meta lang="en" name="description"
11+
content="Online JSON Formatter and JSON Validator will format JSON data, free online JSON formatter lets you chose your indentation level" />
12+
<meta name="language" content="en" />
13+
<meta name="rating" content="general" />
14+
<meta lang="en" name="keywords"
15+
content="JSON Formatter &amp; Validator beautifies,json formatter,format json online,
16+
jsonlint, , JSON Cleaner, json format,format json,JSON Checker,json beautify,json validator, online json formatter, json formatter online, json beautifier" />
17+
<title>JSON Formatter & Validator</title>
18+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
19+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
20+
<style>
21+
textarea {
22+
font-family: monospace;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
29+
<a class="navbar-brand" href="/">JSON Formatter</a>
30+
</nav>
31+
<div class="mt-2 container">
32+
<form ng-app="JSONFormaterApp" ng-controller="JSONFormaterController">
33+
<div class="form-group">
34+
<label for="comment">Your JSON:</label>
35+
<textarea ng-model="inputText" id="inputTextarea" class="form-control" rows="9" cols="40"
36+
placeholder="Paste your JSON here" autofocus="true"></textarea>
37+
</div>
38+
<button class="btn btn-light" ng-click="clearInput();">Clear Input Text</button>
39+
<label>
40+
<select class="browser-default custom-select" ng-options="option.label for option in indentOptions"
41+
ng-model="selectedIndentOption">
42+
<option selected>Selet Indentation</option>
43+
</select>
44+
</label>
45+
<button ng-if='outputText && outputClass !=="text-danger"' class="btn btn-success"
46+
ng-click="copyToClipboard();">Copy Formatted
47+
JSON</button>
48+
<button ng-if='outputText && outputClass !=="text-danger"' class="btn btn-primary"
49+
ng-click="downloadJSON();">Download JSON File</button>
50+
<div class="form-group">
51+
<label for="comment">Formatted JSON:</label>
52+
<textarea ng-bind="outputText" ng-class="outputClass" class="form-control" rows="9" cols="40"
53+
placeholder="Reformatted JSON will appear here" readonly="true"></textarea>
54+
</div>
55+
56+
</form>
57+
</div>
58+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"
59+
integrity="sha256-23hi0Ag650tclABdGCdMNSjxvikytyQ44vYGo9HyOrU=" crossorigin="anonymous"></script>
60+
<script src="index.js"></script>
61+
</body>
62+
63+
</html>

‎index.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
angular.module('JSONFormaterApp', [])
2+
3+
.controller('JSONFormaterController', ['$scope', '$window', function ($scope, $window) {
4+
$scope.inputText = '';
5+
// List of All indentations
6+
$scope.indentOptions = [
7+
{ label: 'None', value: 0 },
8+
{ label: 'One Space', value: 1 },
9+
{ label: 'Two Spaces', value: 2 },
10+
{ label: 'Three Spaces', value: 3 },
11+
{ label: 'Four Spaces', value: 4 }
12+
];
13+
//Default Indentation
14+
$scope.selectedIndentOption = $scope.indentOptions[2];
15+
// Clear Input
16+
$scope.clearInput = function () {
17+
$scope.inputText = '';
18+
$window.document.getElementById('inputTextarea').focus();
19+
};
20+
$scope.$watch('inputText', formattedOutput);
21+
$scope.$watch('selectedIndentOption', formattedOutput);
22+
//Output according User's Point
23+
function formattedOutput() {
24+
try {
25+
var indent = $scope.selectedIndentOption.value;
26+
$scope.indent = indent;
27+
$scope.outputText = updatedJSON($scope.inputText, indent);
28+
$scope.outputClass = 'text-success';
29+
}
30+
catch (err) {
31+
$scope.outputText = err.message;
32+
$scope.outputClass = 'text-danger';
33+
}
34+
}
35+
36+
function updatedJSON(input, indent) {
37+
if (input.length == 0) {
38+
return '';
39+
}
40+
else {
41+
var parsedData = JSON.parse(input);
42+
$scope.indent = indent;
43+
return JSON.stringify(parsedData, null, indent);
44+
}
45+
}
46+
47+
$scope.copyToClipboard = function () {
48+
var copyFrom = document.createElement("textarea");
49+
copyFrom.textContent = $scope.outputText;
50+
var body = document.getElementsByTagName('body')[0];
51+
body.appendChild(copyFrom);
52+
copyFrom.select();
53+
document.execCommand('copy');
54+
body.removeChild(copyFrom);
55+
}
56+
57+
$scope.downloadJSON = function () {
58+
var blob = new Blob([updatedJSON($scope.inputText, $scope.indent)], { type: "application/json;charset=utf-8;" });
59+
var downloadLink = angular.element('<a></a>');
60+
downloadLink.attr('href', window.URL.createObjectURL(blob));
61+
const date = new Date();
62+
const formattedDate = date.toLocaleString('en-GB', {
63+
day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'
64+
}).replace(/ /g, '-');
65+
downloadLink.attr('download', formattedDate+'.json');
66+
downloadLink[0].click();
67+
}
68+
69+
}]);

0 commit comments

Comments
 (0)