Cara Format JSON (Pretty Print)

Pretty printing JSON membuat data mentah dapat dibaca dengan indentasi dan pemisah baris yang tepat. Ini sangat penting untuk debugging, dokumentasi, pengembangan API, dan skenario apa pun di mana manusia perlu memeriksa data terstruktur. Tanpa pretty printing, JSON tampak sebagai satu baris teks yang tidak terputus dan hampir tidak mungkin diuraikan secara visual. Panduan ini mencakup setiap metode untuk memformat JSON di berbagai lingkungan, dari alat online hingga utilitas baris perintah dan pustaka kode.

Apa Itu Pretty Printing?

Pretty printing (disebut juga beautifying atau formatting) mengambil JSON yang ringkas dan menambahkan spasi putih agar dapat dibaca manusia. JSON ringkas seperti {"name":"John","age":30,"hobbies":["reading","coding"]} menjadi representasi terstruktur dengan indentasi:

{
  "name": "John",
  "age": 30,
  "hobbies": [
    "reading",
    "coding"
  ]
}

Proses ini tidak mengubah data — hanya tampilan visualnya. Sebagian besar pretty printer menawarkan indentasi yang dapat dikonfigurasi (2 spasi, 4 spasi, atau tab) dan pengurutan kunci opsional. Beberapa juga menawarkan penyorotan sintaks, tampilan pohon yang dapat dilipat, dan penyorotan kesalahan untuk JSON yang tidak valid.

Metode Online

Alat Help2Code JSON Formatter menyediakan pemformatan instan dengan penyorotan sintaks, validasi, dan tampilan pohon. Ini adalah cara tercepat untuk memformat JSON tanpa menginstal perangkat lunak apa pun. Cukup tempel string JSON Anda ke area input, dan alat akan memformatnya secara real-time. Fitur utama meliputi:

• Pemformatan real-time saat Anda mengetik atau menempel
• Penyorotan sintaks untuk kunci, string, angka, boolean, dan nilai null
• Validasi JSON dengan pesan kesalahan spesifik baris
• Tampilan pohon yang dapat dilipat untuk menavigasi struktur bertingkat dalam
• Unduh output yang diformat sebagai file
• Mode Minify untuk memampatkan JSON yang diformat kembali ke bentuk ringkas
• Salin ke clipboard dengan satu klik

Alat ini ideal untuk developer yang perlu memeriksa respons API dengan cepat, men-debug file konfigurasi, atau berbagi JSON yang diformat dengan rekan kerja.

Perbandingan Metode

Browser DevTools

Semua browser modern menyertakan pretty printing JSON bawaan di alat developer mereka. Ketika Anda mencatat objek ke konsol menggunakan console.log(), browser secara otomatis menampilkannya dalam tampilan pohon interaktif yang dapat dilipat. Namun, untuk kontrol lebih atas pemformatan, gunakan JSON.stringify() dengan opsi pemformatan:

// In browser console
const data = {
  name: "John",
  age: 30,
  hobbies: ["reading", "coding"],
  address: {
    street: "123 Main St",
    city: "Boston",
    zip: "02101"
  }
};

// Pretty print with 2-space indentation
console.log(JSON.stringify(data, null, 2));

// Pretty print with 4-space indentation
console.log(JSON.stringify(data, null, 4));

// Pretty print with tab indentation
console.log(JSON.stringify(data, null, '\t'));

// Using console.table for arrays of objects
const users = [
  { id: 1, name: "Alice", role: "Admin" },
  { id: 2, name: "Bob", role: "User" }
];
console.table(users);

Tab Network di Chrome DevTools juga menyertakan penampil JSON bawaan untuk respons API. Ketika respons memiliki Content-Type: application/json, tab Preview secara otomatis memformat dan menyorot sintaks badan respons dengan bagian yang dapat dilipat.

VS Code

Visual Studio Code menyediakan dukungan pengeditan dan pemformatan JSON yang sangat baik langsung dari kotak:

1. Format Document: Pilih konten JSON dan tekan Shift+Alt+F (Windows/Linux) atau Shift+Option+F (Mac), atau klik kanan dan pilih "Format Document".
2. Auto-format on save: Tambahkan "editor.formatOnSave": true ke settings.json Anda untuk memformat file JSON secara otomatis saat menyimpan.
3. JSON with Comments (.jsonc): VS Code mendukung file JSON yang mengandung komentar, biasa digunakan untuk file konfigurasi seperti settings.json dan launch.json.

Ekstensi VS Code tambahan untuk penanganan JSON meliputi:

• Prettier - Pemformat kode yang mendukung JSON dengan opsi yang dapat disesuaikan
• JSON Tools - Menambahkan perintah sortir, minify, dan format
• Bracket Pair Colorizer - Memberi kode warna pada kurung yang cocok untuk JSON bertingkat dalam

Baris Perintah (jq)

jq adalah pemroses JSON baris perintah yang kuat yang menangani pemformatan, penyaringan, transformasi, dan kueri. Tersedia di semua platform melalui manajer paket dan merupakan alat utama untuk manipulasi JSON dalam skrip:

# Basic formatting - pipe JSON to jq with the identity filter
echo '{"name":"test","value":123}' | jq .

# Colorized output (disabled by default in pipes)
echo '{"name":"test"}' | jq -C .

# Read from file and format
jq . file.json

# Save formatted output
jq . file.json > formatted.json

# Format with specific indentation (default is 2)
jq --indent 4 . file.json

# Minify JSON (remove all whitespace)
jq -c . file.json

# Sort object keys alphabetically
jq -S . file.json

# Extract and format a specific field
cat data.json | jq '.users' | jq .

# Pretty print and colorize in one command
cat messy.json | jq -C . | less -R

jq juga dapat dikombinasikan dengan alat baris perintah lain untuk pipeline pemrosesan data yang kuat:

# Fetch API response and format it
curl https://api.example.com/users | jq .

# Format only the first N items
curl https://api.example.com/users | jq '.[:5]'

# Transform and format
cat data.json | jq '{name: .user.name, email: .user.email}'

Metode Spesifik Bahasa

Setiap bahasa pemrograman utama menyertakan pretty printing JSON bawaan atau berbasis pustaka:

JavaScript:

const pretty = JSON.stringify(obj, null, 2); // 2-space indent
const compact = JSON.stringify(obj); // no whitespace

// With custom replacer function to filter/transform values
const filtered = JSON.stringify(obj, ['name', 'age'], 2);

// Custom replacer to redact sensitive fields
const redacted = JSON.stringify(obj, (key, value) => {
  if (key === 'password' || key === 'ssn') return '***';
  return value;
}, 2);

// Using util.inspect in Node.js for more control
const util = require('util');
console.log(util.inspect(obj, { colors: true, depth: null, sorted: true }));

Python:

import json

data = {"name": "John", "age": 30, "active": True}

# Basic pretty print with 2-space indent
pretty = json.dumps(data, indent=2)

# Sort keys alphabetically
pretty = json.dumps(data, indent=2, sort_keys=True)

# Ensure non-ASCII characters are preserved (not escaped)
pretty = json.dumps(data, indent=2, ensure_ascii=False)

# Custom separators for more compact output
compact = json.dumps(data, separators=(',', ':'))

# Pretty print directly to console
print(json.dumps(data, indent=2, sort_keys=True))

PHP:

$data = ["name" => "John", "age" => 30, "hobbies" => ["reading"]];

// Basic pretty print
$pretty = json_encode($data, JSON_PRETTY_PRINT);

// Preserve Unicode characters
$pretty = json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);

// Sort keys
$pretty = json_encode($data, JSON_PRETTY_PRINT | JSON_SORT_KEYS);

// Format with escaping for HTML
$pretty = json_encode($data, JSON_PRETTY_PRINT | JSON_HEX_TAG | JSON_HEX_AMP);

Ruby:

require 'json'

data = { name: "John", age: 30, active: true }

# Pretty print
puts JSON.pretty_generate(data)

# Custom options
puts JSON.pretty_generate(data, indent: "    ")

Go:

package main

import (
    "encoding/json"
    "fmt"
)

func main() {
    data := map[string]interface{}{
        "name": "John",
        "age": 30,
    }
    pretty, _ := json.MarshalIndent(data, "", "  ")
    fmt.Println(string(pretty))
}

Validasi JSON Saat Memformat

Sebagian besar alat pretty printing juga memvalidasi sintaks JSON. JSON yang tidak valid tidak dapat diformat karena parser tidak dapat menentukan struktur yang dimaksud. Kesalahan validasi JSON umum meliputi:

• Koma trailing ([1, 2,]) - Meskipun diizinkan dalam JavaScript, koma trailing tidak valid dalam JSON
• Kutip tunggal ('value') - JSON memerlukan kutip ganda untuk string
• Kutip hilang di sekitar kunci ({name: "John"}) - Kunci harus diberi kutip
• Karakter kontrol yang tidak di-escape - Tab, newline, dan carriage return harus di-escape sebagai \t, \n, \r
• Komentar - JSON tidak mendukung komentar; gunakan format JSONC jika komentar diperlukan

Kapan Menggunakan Metode yang Mana

Memilih metode yang tepat tergantung pada alur kerja Anda:

• Pemformatan satu kali: Alat online (tercepat, tanpa instalasi)
• Selama pengembangan: Browser DevTools atau VS Code (terintegrasi ke dalam alur kerja Anda)
• Dalam skrip dan otomatisasi: jq (ramah pipeline, dapat diskrip)
• Pemformatan terprogram dalam aplikasi: Metode spesifik bahasa (JavaScript JSON.stringify, Python json.dumps, PHP json_encode)
• File besar: jq atau alat baris perintah (efisien memori untuk streaming)

Kesimpulan

Pretty printing JSON adalah keterampilan mendasar bagi setiap developer yang bekerja dengan API, file konfigurasi, atau pemrosesan data. Dengan metode yang tersedia untuk setiap lingkungan — dari alat online hingga utilitas baris perintah hingga setiap bahasa pemrograman utama — selalu ada cara untuk membuat JSON Anda dapat dibaca. Kuncinya adalah memilih alat yang tepat untuk konteks Anda: cepat dan nyaman untuk inspeksi singkat, kuat dan dapat diskrip untuk pipeline otomatis.