Formatowanie JSON pod kątem czytelności dla człowieka w JavaScript

Uczynienie JSON bardziej czytelnym dla ludzi

Praca z JSON jest częstym zadaniem programistów, zwłaszcza jeśli chodzi o interfejsy API i przechowywanie danych. Jednak surowy kod JSON może być trudny do odczytania i zrozumienia ze względu na brak formatowania. Dla tych, którzy chcą uczynić JSON bardziej dostępnym, zastosowanie odpowiednich wcięć i białych znaków ma kluczowe znaczenie.

W tym artykule przyjrzymy się różnym metodom ładnego drukowania JSON przy użyciu JavaScript. Omówimy nie tylko podstawowe techniki wcięć i białych znaków, ale także sposoby zwiększania czytelności za pomocą kolorów i stylów czcionek. Ten przewodnik pomoże Ci przekształcić surowy JSON w format przyjazny dla człowieka.

Szczegółowe wyjaśnienie skryptów formatujących JSON

Pierwszy skrypt to frontendowe rozwiązanie JavaScript zaprojektowane do ładnego drukowania JSON poprzez dodanie wcięć i zastosowanie kodowania kolorami. Skrypt zaczyna się od funkcji o nazwie prettyPrintJSON, który jako dane wejściowe przyjmuje obiekt JSON. Wewnątrz tej funkcji obiekt JSON jest konwertowany na ciąg znaków z wcięciem o długości 2 spacji przy użyciu metody JSON.stringify(json, null, 2) metoda. Zapewnia to większą czytelność JSON poprzez dodanie niezbędnych białych znaków. Aby jeszcze bardziej zwiększyć czytelność, skrypt używa a .replace(/(".*?"|null|true|false|\d+)/g, ...) metodę z wyrażeniem regularnym pasującym do określonych elementów JSON, takich jak ciągi znaków, liczby, wartości logiczne i wartości null. Każdy dopasowany element jest zawinięty w a tag z odpowiednią klasą, umożliwiając CSS zastosowanie różnych kolorów do każdego typu danych. Sformatowany ciąg JSON jest następnie wstawiany do treści dokumentu za pomocą document.body.innerHTML.

Drugi skrypt to rozwiązanie backendowe wykorzystujące Node.js do ładnego drukowania JSON. Ten skrypt tworzy serwer HTTP za pomocą http.createServer(...), który nasłuchuje żądań przychodzących na określonym porcie za pomocą .listen(). Po otrzymaniu żądania serwer odpowiada obiektem JSON sformatowanym pod kątem czytelności. Obiekt JSON jest konwertowany na ciąg znaków z wcięciem za pomocą JSON.stringify(json, null, 2). Nagłówek odpowiedzi jest ustawiony tak, aby wskazywał, że typem zawartości jest JSON res.writeHead(200, { 'Content-Type': 'application/json' }). Na koniec ładnie wydrukowany ciąg JSON jest wysyłany do klienta za pomocą res.end(). Ten skrypt pozwala programistom szybko zobaczyć w przeglądarce ładnie sformatowane dane wyjściowe JSON, po prostu przechodząc do adresu serwera.

// 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');
});

Zwiększanie czytelności JSON za pomocą dodatkowych narzędzi

Podczas gdy poprzednie rozwiązania skupiały się na frontendowych i backendowych metodach JavaScript w celu ładnego drukowania JSON, istnieją inne narzędzia i techniki, które mogą jeszcze bardziej zwiększyć czytelność JSON. Jednym z popularnych podejść jest użycie rozszerzeń przeglądarki lub narzędzi online. Rozszerzenia takie jak JSONView lub JSON Formatter mogą automatycznie formatować JSON w przeglądarce, dodając wcięcia i kodowanie kolorami w celu poprawy czytelności. Narzędzia te są szczególnie przydatne dla programistów, którzy często korzystają z interfejsów API i muszą szybko analizować i rozumieć dane JSON bez pisania dodatkowego kodu.

Inna przydatna metoda polega na wykorzystaniu bibliotek takich jak Highlight.js lub Prism.js, które są zaprojektowane do obsługi podświetlania składni dla różnych języków programowania, w tym JSON. Biblioteki te można zintegrować z aplikacjami internetowymi w celu dynamicznego formatowania i wyróżniania danych JSON. Używając Highlight.js, możesz zastosować predefiniowane motywy do ciągów JSON, co ułatwi rozróżnianie różnych typów danych. Ponadto zintegrowanie takich bibliotek z przepływem prac programistycznych może zaoszczędzić czas i zapewnić spójność formatowania JSON w różnych projektach.