JSON formatavimas, kad būtų galima skaityti „JavaScript“.

Kad JSON būtų lengviau skaitomas žmonėms

Darbas su JSON yra įprasta kūrėjų užduotis, ypač kai susiduriama su API ir duomenų saugojimu. Tačiau neapdorotą JSON gali būti sunku perskaityti ir suprasti, nes trūksta formatavimo. Norintiems padaryti JSON prieinamesnį, labai svarbu taikyti tinkamą įtrauką ir tarpą.

Šiame straipsnyje išnagrinėsime įvairius būdus, kaip gražiai spausdinti JSON naudojant „JavaScript“. Apžvelgsime ne tik pagrindinius įtraukos ir tarpų metodus, bet ir tai, kaip pagerinti skaitomumą naudojant spalvas ir šriftų stilius. Šis vadovas padės paversti neapdorotą JSON į žmogui tinkamą formatą.

Išsamus JSON formatavimo scenarijų paaiškinimas

Pirmasis scenarijus yra priekinės programos „JavaScript“ sprendimas, skirtas gražiai spausdinti JSON pridedant įtrauką ir taikant spalvų kodavimą. Scenarijus prasideda funkcija, vadinama prettyPrintJSON, kuris kaip įvestį paima JSON objektą. Šioje funkcijoje JSON objektas konvertuojamas į eilutę su 2 tarpų įtrauka naudojant JSON.stringify(json, null, 2) metodas. Tai užtikrina, kad JSON būtų lengviau skaitomas, pridėjus reikiamą tarpą. Siekiant dar labiau pagerinti skaitomumą, scenarijus naudoja a .replace(/(".*?"|null|true|false|\d+)/g, ...) metodas su reguliaria išraiška, kad atitiktų konkrečius JSON elementus, pvz., eilutes, skaičius, loginius ir nulines reikšmes. Kiekvienas suderintas elementas yra suvyniotas į a žyma su atitinkama klase, leidžiančia CSS kiekvienam duomenų tipui pritaikyti skirtingas spalvas. Tada suformatuota JSON eilutė įterpiama į dokumento turinį naudojant document.body.innerHTML.

Antrasis scenarijus yra vidinis sprendimas, naudojant Node.js, kad būtų galima gražiai spausdinti JSON. Šis scenarijus sukuria HTTP serverį su http.createServer(...), kuri klausosi gaunamų užklausų nurodytu prievadu naudodama .listen(). Gavęs užklausą, serveris atsako pateikdamas JSON objektą, suformatuotą, kad būtų galima skaityti. JSON objektas konvertuojamas į eilutę su įtrauka naudojant JSON.stringify(json, null, 2). Atsakymo antraštė nustatyta taip, kad būtų nurodyta, kad turinio tipas yra JSON su res.writeHead(200, { 'Content-Type': 'application/json' }). Galiausiai gražiai atspausdinta JSON eilutė siunčiama klientui naudojant res.end(). Šis scenarijus leidžia kūrėjams greitai pamatyti gražiai suformatuotą JSON išvestį savo naršyklėje, tiesiog nuėjus į serverio adresą.

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

JSON skaitomumo gerinimas naudojant papildomus įrankius

Nors ankstesniuose sprendimuose pagrindinis dėmesys buvo skiriamas priekinės ir galinės sistemos „JavaScript“ metodams, siekiant gražiai spausdinti JSON, yra kitų įrankių ir metodų, kurie gali dar labiau pagerinti JSON skaitomumą. Vienas populiarus būdas yra naršyklės plėtinių arba internetinių įrankių naudojimas. Plėtiniai, tokie kaip „JSONView“ arba „JSON Formatter“, gali automatiškai formatuoti JSON naršyklėje, pridedant įtrauką ir spalvų kodavimą, kad pagerintų skaitymą. Šie įrankiai ypač naudingi kūrėjams, kurie dažnai sąveikauja su API ir kuriems reikia greitai išanalizuoti ir suprasti JSON duomenis neįrašant papildomo kodo.

Kitas naudingas metodas apima bibliotekų, pvz., Highlight.js arba Prism.js, panaudojimą, kurios skirtos įvairių programavimo kalbų, įskaitant JSON, sintaksės paryškinimui. Šios bibliotekos gali būti integruotos į žiniatinklio programas, kad būtų galima dinamiškai formatuoti ir paryškinti JSON duomenis. Naudojant Highlight.js, galite taikyti iš anksto nustatytas temas JSON eilutėms, kad būtų lengviau atskirti skirtingus duomenų tipus. Be to, tokių bibliotekų integravimas į savo kūrimo darbo eigą gali sutaupyti laiko ir užtikrinti nuoseklų JSON formatavimą skirtinguose projektuose.