Formatera JSON för mänsklig läsbarhet i JavaScript

Gör JSON mer läsbar för människor

Att arbeta med JSON är en vanlig uppgift för utvecklare, särskilt när de hanterar API:er och datalagring. Rå JSON kan dock vara svår att läsa och förstå på grund av dess brist på formatering. För dem som vill göra JSON mer tillgängligt är det avgörande att tillämpa korrekt indrag och blanksteg.

I den här artikeln kommer vi att utforska olika metoder för att snyggt skriva ut JSON med JavaScript. Vi kommer inte bara att täcka grundläggande indrags- och blankstegstekniker utan också hur man förbättrar läsbarheten med färger och teckensnittsstilar. Den här guiden hjälper dig att omvandla rå JSON till ett människovänligt format.

Detaljerad förklaring av JSON-formateringsskript

Det första skriptet är en frontend JavaScript-lösning utformad för att snyggt skriva ut JSON genom att lägga till indrag och tillämpa färgkodning. Skriptet börjar med en funktion som kallas prettyPrintJSON, som tar ett JSON-objekt som indata. Inuti den här funktionen konverteras JSON-objektet till en sträng med 2-stegsindrag med hjälp av JSON.stringify(json, null, 2) metod. Detta säkerställer att JSON är mer läsbar genom att lägga till nödvändiga blanksteg. För att ytterligare förbättra läsbarheten använder skriptet en .replace(/(".*?"|null|true|false|\d+)/g, ...) metod med ett reguljärt uttryck för att matcha specifika JSON-element som strängar, tal, booleaner och nullvärden. Varje matchat element är insvept i en taggen med en motsvarande klass, vilket gör att CSS kan tillämpa olika färger på varje datatyp. Den formaterade JSON-strängen infogas sedan i dokumentets kropp med hjälp av document.body.innerHTML.

Det andra skriptet är en backend-lösning som använder Node.js för att snyggt skriva ut JSON. Detta skript skapar en HTTP-server med http.createServer(...), som lyssnar efter inkommande förfrågningar på en specificerad port med hjälp av .listen(). När servern tar emot en begäran svarar den med ett JSON-objekt formaterat för läsbarhet. JSON-objektet konverteras till en sträng med indrag med hjälp av JSON.stringify(json, null, 2). Svarshuvudet är inställt för att indikera att innehållstypen är JSON med res.writeHead(200, { 'Content-Type': 'application/json' }). Slutligen skickas den snyggt tryckta JSON-strängen till klienten med hjälp av res.end(). Detta skript tillåter utvecklare att snabbt se snyggt formaterad JSON-utdata i sin webbläsare genom att helt enkelt navigera till serverns adress.

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

Förbättra JSON-läsbarheten med ytterligare verktyg

Medan de tidigare lösningarna fokuserade på frontend och backend JavaScript-metoder för att snyggt skriva ut JSON, finns det andra verktyg och tekniker som ytterligare kan förbättra JSON-läsbarheten. En populär metod är att använda webbläsartillägg eller onlineverktyg. Tillägg som JSONView eller JSON Formatter kan automatiskt formatera JSON i webbläsaren, lägga till indrag och färgkodning för att förbättra läsbarheten. Dessa verktyg är särskilt användbara för utvecklare som ofta interagerar med API:er och snabbt behöver analysera och förstå JSON-data utan att skriva ytterligare kod.

En annan användbar metod innebär att utnyttja bibliotek som Highlight.js eller Prism.js, som är designade för att hantera syntaxmarkering för olika programmeringsspråk, inklusive JSON. Dessa bibliotek kan integreras i webbapplikationer för att dynamiskt formatera och markera JSON-data. Genom att använda Highlight.js, kan du tillämpa fördefinierade teman på JSON-strängar, vilket gör det lättare att skilja mellan olika datatyper. Att integrera sådana bibliotek i ditt utvecklingsarbetsflöde kan dessutom spara tid och säkerställa konsekvens i JSON-formatering över olika projekt.