For this, use JSON.parse() along with JSON.stringify().
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<textarea id="prettyJSONFormat" cols=100 rows=20></textarea>
<button onclick="printTheJSONInPrettyFormat()">Click The Button To
get the Pretty JSON</button>
<script>
function printTheJSONInPrettyFormat() {
var badJSON = document.getElementById('prettyJSONFormat').value;
var parseJSON = JSON.parse(badJSON);
var JSONInPrettyFormat = JSON.stringify(parseJSON, undefined, 4);
document.getElementById('prettyJSONFormat').value =
JSONInPrettyFormat;
}
</script>
</body>
</html>To run the above program, just save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VS Code editor.
Output
This will produce the following output −
Now, I am going to put some bad (unformatted) JSON. The sample JSON data is as follows −
After clicking the button, you will get the following sample output i.e. properly formatted JSON −
