Formatieren von JSON für die menschliche Lesbarkeit in JavaScript

JSON für Menschen lesbarer machen

Die Arbeit mit JSON ist eine häufige Aufgabe für Entwickler, insbesondere wenn es um APIs und Datenspeicherung geht. Allerdings kann rohes JSON aufgrund der fehlenden Formatierung schwer zu lesen und zu verstehen sein. Für diejenigen, die JSON zugänglicher machen möchten, ist die Anwendung der richtigen Einrückung und Leerzeichen von entscheidender Bedeutung.

In diesem Artikel untersuchen wir verschiedene Methoden zum hübschen Drucken von JSON mithilfe von JavaScript. Wir behandeln nicht nur grundlegende Einrückungs- und Leerraumtechniken, sondern auch, wie Sie die Lesbarkeit mit Farben und Schriftarten verbessern können. Dieser Leitfaden hilft Ihnen, rohes JSON in ein benutzerfreundliches Format umzuwandeln.

Detaillierte Erläuterung der JSON-Formatierungsskripts

Das erste Skript ist eine Frontend-JavaScript-Lösung, die darauf ausgelegt ist, JSON durch das Hinzufügen von Einrückungen und die Anwendung von Farbcodierung hübsch zu drucken. Das Skript beginnt mit einem Funktionsaufruf prettyPrintJSON, das ein JSON-Objekt als Eingabe verwendet. Innerhalb dieser Funktion wird das JSON-Objekt mithilfe von in einen String mit 2-Leerzeichen-Einrückung konvertiert JSON.stringify(json, null, 2) Methode. Dadurch wird sichergestellt, dass der JSON besser lesbar ist, indem der erforderliche Leerraum hinzugefügt wird. Um die Lesbarkeit weiter zu verbessern, verwendet das Skript a .replace(/(".*?"|null|true|false|\d+)/g, ...) Methode mit einem regulären Ausdruck, um bestimmte JSON-Elemente wie Zeichenfolgen, Zahlen, boolesche Werte und Nullwerte abzugleichen. Jedes übereinstimmende Element wird in ein verpackt Tag mit einer entsprechenden Klasse, sodass CSS auf jeden Datentyp unterschiedliche Farben anwenden kann. Der formatierte JSON-String wird dann mit in den Hauptteil des Dokuments eingefügt document.body.innerHTML.

Das zweite Skript ist eine Backend-Lösung, die Node.js verwendet, um JSON hübsch zu drucken. Dieses Skript erstellt einen HTTP-Server mit http.createServer(...), das auf eingehende Anfragen an einem angegebenen Port lauscht .listen(). Beim Empfang einer Anfrage antwortet der Server mit einem JSON-Objekt, das zur besseren Lesbarkeit formatiert ist. Das JSON-Objekt wird mit in einen String mit Einrückung konvertiert JSON.stringify(json, null, 2). Der Antwortheader ist so eingestellt, dass er angibt, dass der Inhaltstyp JSON ist res.writeHead(200, { 'Content-Type': 'application/json' }). Schließlich wird der hübsch gedruckte JSON-String mit an den Client gesendet res.end(). Mit diesem Skript können Entwickler schnell eine gut formatierte JSON-Ausgabe in ihrem Browser sehen, indem sie einfach zur Serveradresse navigieren.

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

Verbesserung der JSON-Lesbarkeit mit zusätzlichen Tools

Während sich die vorherigen Lösungen auf Frontend- und Backend-JavaScript-Methoden zum hübschen Drucken von JSON konzentrierten, gibt es andere Tools und Techniken, die die Lesbarkeit von JSON weiter verbessern können. Ein beliebter Ansatz ist die Verwendung von Browsererweiterungen oder Online-Tools. Erweiterungen wie JSONView oder JSON Formatter können JSON automatisch im Browser formatieren und Einrückungen und Farbcodierungen hinzufügen, um die Lesbarkeit zu verbessern. Diese Tools sind besonders nützlich für Entwickler, die häufig mit APIs interagieren und JSON-Daten schnell analysieren und verstehen müssen, ohne zusätzlichen Code schreiben zu müssen.

Eine weitere nützliche Methode ist die Nutzung von Bibliotheken wie Highlight.js oder Prism.js, die für die Syntaxhervorhebung für verschiedene Programmiersprachen, einschließlich JSON, konzipiert sind. Diese Bibliotheken können in Webanwendungen integriert werden, um JSON-Daten dynamisch zu formatieren und hervorzuheben. Durch die Nutzung Highlight.jskönnen Sie vordefinierte Designs auf JSON-Strings anwenden und so die Unterscheidung zwischen verschiedenen Datentypen erleichtern. Darüber hinaus kann die Integration solcher Bibliotheken in Ihren Entwicklungsworkflow Zeit sparen und die Konsistenz der JSON-Formatierung über verschiedene Projekte hinweg gewährleisten.