Форматування JSON для читання людиною в JavaScript

Зробіть JSON більш читабельним для людей

Робота з JSON є звичайним завданням для розробників, особливо коли вони мають справу з API та зберіганням даних. Однак необроблений JSON може бути важко прочитати та зрозуміти через відсутність форматування. Для тих, хто прагне зробити JSON більш доступним, застосування належних відступів і пробілів має вирішальне значення.

У цій статті ми розглянемо різні методи красивого друку JSON за допомогою JavaScript. Ми розглянемо не лише основні методи відступів і пробілів, але й те, як покращити читабельність за допомогою кольорів і стилів шрифту. Цей посібник допоможе вам перетворити необроблений JSON у зручний для людини формат.

Детальне пояснення сценаріїв форматування JSON

Перший сценарій — це інтерфейсне рішення JavaScript, призначене для красивого друку JSON шляхом додавання відступів і застосування кольорового кодування. Сценарій починається з функції під назвою prettyPrintJSON, який приймає об’єкт JSON як вхідні дані. У цій функції об’єкт JSON перетворюється на рядок із 2-пробілним відступом за допомогою JSON.stringify(json, null, 2) метод. Це забезпечує більшу читабельність JSON завдяки додаванню необхідних пробілів. Щоб ще більше покращити читабельність, сценарій використовує a .replace(/(".*?"|null|true|false|\d+)/g, ...) метод із регулярним виразом для відповідності певним елементам JSON, таким як рядки, числа, логічні значення та нульові значення. Кожен відповідний елемент загортається в a тег із відповідним класом, що дозволяє CSS застосовувати різні кольори до кожного типу даних. Відформатований рядок JSON потім вставляється в тіло документа за допомогою document.body.innerHTML.

Другий сценарій — це серверне рішення, яке використовує Node.js для красивого друку JSON. Цей сценарій створює HTTP-сервер із http.createServer(...), який прослуховує вхідні запити на вказаному порту за допомогою .listen(). Отримавши запит, сервер відповідає об’єктом JSON, відформатованим для зручності читання. Об’єкт JSON перетворюється на рядок із відступом за допомогою JSON.stringify(json, null, 2). Заголовок відповіді налаштовано на те, що тип вмісту – JSON with res.writeHead(200, { 'Content-Type': 'application/json' }). Нарешті, красиво надрукований рядок JSON надсилається клієнту за допомогою res.end(). Цей сценарій дозволяє розробникам швидко переглядати красиво відформатований вихід JSON у своєму браузері, просто перейшовши за адресою сервера.

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
  return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  // Sample JSON data
  const jsonData = {
    name: "John",
    age: 30,
    city: "New York",
    isStudent: false
  };
  // Send pretty-printed JSON
  res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

Покращення читабельності JSON за допомогою додаткових інструментів

У той час як попередні рішення були зосереджені на зовнішніх і внутрішніх методах JavaScript для красивого друку JSON, існують інші інструменти та методи, які можуть ще більше покращити читабельність JSON. Одним із популярних підходів є використання розширень браузера або онлайн-інструментів. Такі розширення, як JSONView або JSON Formatter, можуть автоматично форматувати JSON у браузері, додаючи відступи та кольорове кодування для покращення читабельності. Ці інструменти особливо корисні для розробників, які часто взаємодіють з API і потребують швидкого аналізу та розуміння даних JSON без написання додаткового коду.

Інший корисний метод передбачає використання бібліотек, таких як Highlight.js або Prism.js, які призначені для обробки підсвічування синтаксису для різних мов програмування, включаючи JSON. Ці бібліотеки можна інтегрувати у веб-програми для динамічного форматування та виділення даних JSON. З допомогою Highlight.js, ви можете застосувати попередньо визначені теми до рядків JSON, що полегшить розрізнення різних типів даних. Крім того, інтеграція таких бібліотек у робочий процес розробки може заощадити час і забезпечити узгодженість форматування JSON у різних проектах.