Computer >> Máy Tính >  >> Lập trình >> Javascript

Kiểm tra trước dữ liệu JSON trong đầu vào textarea trong JavaScript?

Đối với đ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, 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>

Để chạy chương trình trên, chỉ cần lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp và chọn tùy chọn mở bằng máy chủ trực tiếp trong trình chỉnh sửa Mã VS.

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Kiểm tra trước dữ liệu JSON trong đầu vào textarea trong JavaScript?

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

Kiểm tra trước dữ liệu JSON trong đầu vào textarea trong JavaScript?

Sau khi nhấp vào nút, bạn sẽ nhận được đầu ra mẫu sau, tức là JSON được định dạng đúng -

Kiểm tra trước dữ liệu JSON trong đầu vào textarea trong JavaScript?