JSON-muotoilu ihmisen luettavuutta varten JavaScriptissä

Tehdään JSONista luettavampaa ihmisille

JSON-työskentely on yleinen tehtävä kehittäjille, varsinkin sovellusliittymien ja tietojen tallennuksen yhteydessä. Raaka JSON voi kuitenkin olla vaikea lukea ja ymmärtää sen muotoilun puutteen vuoksi. Niille, jotka haluavat tehdä JSONista helpommin käytettävyyden, oikean sisennyksen ja välilyönnin käyttäminen on ratkaisevan tärkeää.

Tässä artikkelissa tutkimme erilaisia ​​menetelmiä JSON:n kauniiseen tulostamiseen JavaScriptin avulla. Käsittelemme sisennysten ja välilyöntien perustekniikoiden lisäksi myös luettavuuden parantamisen väreillä ja kirjasintyyleillä. Tämä opas auttaa sinua muuttamaan raaka-JSON-muodon ihmisystävälliseksi.

Yksityiskohtainen selitys JSON-muotoiluskripteistä

Ensimmäinen komentosarja on käyttöliittymän JavaScript-ratkaisu, joka on suunniteltu JSON-tulostukseen lisäämällä sisennykset ja käyttämällä värikoodausta. Skripti alkaa funktiolla nimeltä prettyPrintJSON, joka ottaa syötteenä JSON-objektin. Tämän funktion sisällä JSON-objekti muunnetaan merkkijonoksi, jossa on 2-välin sisennys käyttämällä JSON.stringify(json, null, 2) menetelmä. Tämä varmistaa, että JSON on luettavampi lisäämällä tarvittavat välilyönnit. Luettavuuden parantamiseksi skripti käyttää a .replace(/(".*?"|null|true|false|\d+)/g, ...) menetelmä säännöllisen lausekkeen kanssa, joka vastaa tiettyjä JSON-elementtejä, kuten merkkijonoja, numeroita, loogisia arvoja ja nolla-arvoja. Jokainen vastaava elementti on kääritty a -tunniste vastaavalla luokalla, jolloin CSS voi käyttää eri värejä jokaiseen tietotyyppiin. Muotoiltu JSON-merkkijono lisätään sitten asiakirjan runkoon käyttämällä document.body.innerHTML.

Toinen komentosarja on taustaratkaisu, joka käyttää Node.js:ää kauniin JSON-tulostukseen. Tämä komentosarja luo HTTP-palvelimen http.createServer(...), joka kuuntelee saapuvia pyyntöjä määritetystä portista käyttämällä .listen(). Pyynnön saatuaan palvelin vastaa luettavuutta varten muotoillulla JSON-objektilla. JSON-objekti muunnetaan merkkijonoksi, jossa on sisennys käyttämällä JSON.stringify(json, null, 2). Vastauksen otsikko on asetettu osoittamaan, että sisältötyyppi on JSON with res.writeHead(200, { 'Content-Type': 'application/json' }). Lopuksi kauniisti painettu JSON-merkkijono lähetetään asiakkaalle käyttämällä res.end(). Tämän skriptin avulla kehittäjät voivat nopeasti nähdä kauniisti muotoillun JSON-tulosteen selaimessaan yksinkertaisesti navigoimalla palvelimen osoitteeseen.

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

JSONin luettavuuden parantaminen lisätyökaluilla

Vaikka aiemmat ratkaisut keskittyivät käyttöliittymän ja taustan JavaScript-menetelmiin kauniin JSON-tulostuksen saamiseksi, on muita työkaluja ja tekniikoita, jotka voivat parantaa JSON-luetettavuutta entisestään. Yksi suosittu tapa on käyttää selainlaajennuksia tai verkkotyökaluja. Laajennukset, kuten JSONView tai JSON Formatter, voivat alustaa JSON:n automaattisesti selaimessa lisäämällä sisennyksen ja värikoodauksen luettavuuden parantamiseksi. Nämä työkalut ovat erityisen hyödyllisiä kehittäjille, jotka ovat usein vuorovaikutuksessa sovellusliittymien kanssa ja joiden on jäsennettävä ja ymmärrettävä JSON-tietoja nopeasti kirjoittamatta lisäkoodia.

Toinen hyödyllinen tapa on hyödyntää kirjastoja, kuten Highlight.js tai Prism.js, jotka on suunniteltu käsittelemään syntaksin korostusta eri ohjelmointikielille, mukaan lukien JSON. Nämä kirjastot voidaan integroida verkkosovelluksiin JSON-tietojen dynaamiseksi muotoiluksi ja korostamiseksi. Käyttämällä Highlight.js, voit käyttää ennalta määritettyjä teemoja JSON-merkkijonoihin, mikä helpottaa eri tietotyyppien erottamista toisistaan. Lisäksi tällaisten kirjastojen integroiminen kehitystyönkulkuun voi säästää aikaa ja varmistaa johdonmukaisuuden JSON-muotoilussa eri projekteissa.