Memformat JSON untuk Keterbacaan Manusia dalam JavaScript

Membuat JSON Lebih Mudah Dibaca Manusia

Bekerja dengan JSON adalah tugas umum bagi pengembang, terutama ketika berhadapan dengan API dan penyimpanan data. Namun, JSON mentah mungkin sulit dibaca dan dipahami karena kurangnya format. Bagi mereka yang ingin membuat JSON lebih mudah diakses, menerapkan indentasi dan spasi yang tepat sangatlah penting.

Pada artikel ini, kita akan menjelajahi berbagai metode untuk mencetak JSON dengan cantik menggunakan JavaScript. Kami tidak hanya akan membahas teknik dasar indentasi dan spasi tetapi juga cara meningkatkan keterbacaan dengan warna dan gaya font. Panduan ini akan membantu Anda mengubah JSON mentah menjadi format yang ramah manusia.

Penjelasan Mendetail tentang Skrip Pemformatan JSON

Skrip pertama adalah solusi JavaScript frontend yang dirancang untuk mencetak JSON dengan indah dengan menambahkan indentasi dan menerapkan kode warna. Skrip dimulai dengan fungsi yang dipanggil prettyPrintJSON, yang mengambil objek JSON sebagai masukan. Di dalam fungsi ini, objek JSON diubah menjadi string dengan indentasi 2 spasi menggunakan JSON.stringify(json, null, 2) metode. Hal ini memastikan bahwa JSON lebih mudah dibaca dengan menambahkan spasi yang diperlukan. Untuk lebih meningkatkan keterbacaan, skrip menggunakan a .replace(/(".*?"|null|true|false|\d+)/g, ...) metode dengan ekspresi reguler untuk mencocokkan elemen JSON tertentu seperti string, angka, boolean, dan nilai null. Setiap elemen yang cocok dibungkus dalam a tag dengan kelas yang sesuai, memungkinkan CSS untuk menerapkan warna berbeda ke setiap tipe data. String JSON yang diformat kemudian dimasukkan ke dalam badan dokumen menggunakan document.body.innerHTML.

Skrip kedua adalah solusi backend menggunakan Node.js untuk mencetak JSON dengan cantik. Skrip ini membuat server HTTP dengan http.createServer(...), yang mendengarkan permintaan masuk pada port tertentu menggunakan .listen(). Setelah menerima permintaan, server merespons dengan objek JSON yang diformat agar mudah dibaca. Objek JSON diubah menjadi string dengan lekukan menggunakan JSON.stringify(json, null, 2). Header respons diatur untuk menunjukkan bahwa tipe kontennya adalah JSON res.writeHead(200, { 'Content-Type': 'application/json' }). Terakhir, string JSON yang dicetak cantik dikirim ke klien menggunakan res.end(). Skrip ini memungkinkan pengembang dengan cepat melihat keluaran JSON yang diformat dengan baik di browser mereka hanya dengan menavigasi ke alamat server.

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

Meningkatkan Keterbacaan JSON dengan Alat Tambahan

Meskipun solusi sebelumnya berfokus pada metode JavaScript frontend dan backend untuk mencetak JSON dengan cantik, ada alat dan teknik lain yang dapat lebih meningkatkan keterbacaan JSON. Salah satu pendekatan yang populer adalah menggunakan ekstensi browser atau alat online. Ekstensi seperti JSONView atau JSON Formatter dapat secara otomatis memformat JSON di browser, menambahkan indentasi dan kode warna untuk meningkatkan keterbacaan. Alat-alat ini sangat berguna bagi pengembang yang sering berinteraksi dengan API dan perlu mengurai dan memahami data JSON dengan cepat tanpa menulis kode tambahan.

Metode lain yang berguna melibatkan pemanfaatan perpustakaan seperti Highlight.js atau Prism.js, yang dirancang untuk menangani penyorotan sintaksis untuk berbagai bahasa pemrograman, termasuk JSON. Pustaka ini dapat diintegrasikan ke dalam aplikasi web untuk memformat dan menyorot data JSON secara dinamis. Dengan menggunakan Highlight.js, Anda dapat menerapkan tema yang telah ditentukan sebelumnya ke string JSON, sehingga memudahkan untuk membedakan berbagai tipe data. Selain itu, mengintegrasikan perpustakaan tersebut ke dalam alur kerja pengembangan Anda dapat menghemat waktu dan memastikan konsistensi dalam format JSON di berbagai proyek.