Làm đẹp JSON dữ liệu trong textarea input trong JavaScript

Để làm điều này, hãy sử dụng JSON.parse() cùng với JSON.stringify().

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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()">Nhấp Nút Để Lấy JSON Đẹp</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>

Để chạy chương trình trên, chỉ cần lưu tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn open with live server trong trình soạn thảo VS Code.

Kết quả

Chương trình sẽ cho ra kết quả sau:

Bây giờ, tôi sẽ đặt một số JSON xấu (chưa định dạng). Dữ liệu JSON mẫu như sau:

Sau khi nhấp nút, bạn sẽ nhận được kết quả mẫu sau tức là JSON được định dạng đúng: