JSON formatēšana cilvēka lasāmībai JavaScript

Padarot JSON lasāmāku cilvēkiem

Darbs ar JSON ir izplatīts izstrādātāju uzdevums, jo īpaši saistībā ar API un datu glabāšanu. Tomēr neapstrādāts JSON var būt grūti lasāms un saprotams, jo tam trūkst formatējuma. Tiem, kas vēlas padarīt JSON pieejamāku, ir ļoti svarīgi izmantot pareizu atkāpi un atstarpes.

Šajā rakstā mēs izpētīsim dažādas metodes, kā glīti izdrukāt JSON, izmantojot JavaScript. Mēs apskatīsim ne tikai pamata atkāpes un atstarpju paņēmienus, bet arī to, kā uzlabot lasāmību, izmantojot krāsas un fontu stilus. Šī rokasgrāmata palīdzēs pārveidot neapstrādātu JSON personai piemērotā formātā.

Detalizēts JSON formatēšanas skriptu skaidrojums

Pirmais skripts ir priekšgala JavaScript risinājums, kas paredzēts JSON glītai drukāšanai, pievienojot atkāpi un piemērojot krāsu kodējumu. Skripts sākas ar funkciju, ko sauc prettyPrintJSON, kas izmanto JSON objektu kā ievadi. Šajā funkcijā JSON objekts tiek pārveidots par virkni ar 2 atstarpju atkāpi, izmantojot JSON.stringify(json, null, 2) metodi. Tas nodrošina, ka JSON ir labāk lasāms, pievienojot nepieciešamo atstarpi. Lai vēl vairāk uzlabotu lasāmību, skripts izmanto a .replace(/(".*?"|null|true|false|\d+)/g, ...) metodi ar regulāru izteiksmi, lai atbilstu konkrētiem JSON elementiem, piemēram, virknēm, skaitļiem, Būla vērtībām un nulles vērtībām. Katrs saskaņotais elements ir iesaiņots a tagu ar atbilstošu klasi, ļaujot CSS katram datu tipam lietot dažādas krāsas. Pēc tam formatētā JSON virkne tiek ievietota dokumenta pamattekstā, izmantojot document.body.innerHTML.

Otrais skripts ir aizmugursistēmas risinājums, kurā tiek izmantots Node.js, lai glīti izdrukātu JSON. Šis skripts izveido HTTP serveri ar http.createServer(...), kas noklausās ienākošos pieprasījumus noteiktā portā, izmantojot .listen(). Saņemot pieprasījumu, serveris atbild ar JSON objektu, kas formatēts lasāmībai. JSON objekts tiek pārveidots par virkni ar atkāpi, izmantojot JSON.stringify(json, null, 2). Atbildes galvene ir iestatīta, lai norādītu, ka satura tips ir JSON ar res.writeHead(200, { 'Content-Type': 'application/json' }). Visbeidzot, glīti izdrukātā JSON virkne tiek nosūtīta klientam, izmantojot res.end(). Šis skripts ļauj izstrādātājiem ātri redzēt labi formatētu JSON izvadi savā pārlūkprogrammā, vienkārši pārejot uz servera adresi.

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

Uzlabojiet JSON lasāmību, izmantojot papildu rīkus

Lai gan iepriekšējie risinājumi bija vērsti uz priekšgala un aizmugursistēmas JavaScript metodēm, lai JSON glīti izdrukātu, ir arī citi rīki un metodes, kas var vēl vairāk uzlabot JSON lasāmību. Viena populāra pieeja ir pārlūkprogrammas paplašinājumu vai tiešsaistes rīku izmantošana. Tādi paplašinājumi kā JSONView vai JSON Formatter var automātiski formatēt JSON pārlūkprogrammā, pievienojot atkāpi un krāsu kodējumu, lai uzlabotu lasāmību. Šie rīki ir īpaši noderīgi izstrādātājiem, kuri bieži mijiedarbojas ar API un kuriem nepieciešams ātri parsēt un izprast JSON datus, neierakstot papildu kodu.

Vēl viena noderīga metode ietver bibliotēku, piemēram, Highlight.js vai Prism.js, izmantošanu, kas paredzētas dažādu programmēšanas valodu, tostarp JSON, sintakses izcelšanai. Šīs bibliotēkas var integrēt tīmekļa lietojumprogrammās, lai dinamiski formatētu un izceltu JSON datus. Izmantojot Highlight.js, varat lietot iepriekš definētus motīvus JSON virknēm, atvieglojot dažādu datu tipu nošķiršanu. Turklāt šādu bibliotēku integrēšana izstrādes darbplūsmā var ietaupīt laiku un nodrošināt JSON formatējuma konsekvenci dažādos projektos.