Formatter JSON

Apa itu Pemformatan JSON?

Pemformatan JSON adalah proses mengubah data JSON menjadi representasi yang konsisten dan mudah dibaca manusia dengan menambahkan indentasi, spasi, dan pemisah baris—tanpa mengubah struktur atau isinya. Pemformatan yang tepat memudahkan inspeksi, debugging, berbagi, dan pengeditan JSON, sekaligus tetap kompatibel dengan mesin dan alat perangkat lunak.

JSON secara definisi mengabaikan spasi di luar nilai string. Namun, JSON yang diformat buruk (atau diminyaki)—tanpa indentasi atau digabungkan dalam satu baris—hampir mustahil dibaca atau diubah dengan andal oleh manusia.

Memformat vs. Meminify JSON

• Pemformatan menambahkan spasi, indentasi, dan pemisah baris untuk kejelasan dan keterbacaan.
• Minify menghapus semua spasi yang tidak diperlukan untuk kerapatan dan efisiensi maksimum dalam penyimpanan atau pengiriman.
• Formatter JSON yang tangguh memungkinkan Anda beralih antara mode ini, memudahkan perpindahan antara versi yang ramah manusia dan yang dioptimalkan mesin sesuai kebutuhan.

Contoh: JSON Minify vs. Format

{"id":"3f4b2c","user":{"name":"Dana","is_active":true},"roles":["admin","editor"],"count":7}

{
  "id": "3f4b2c",
  "user": {
    "name": "Dana",
    "is_active": true
  },
  "roles": [
    "admin",
    "editor"
  ],
  "count": 7
}

Mengapa Memformat JSON?

• Keterbacaan: Indentasi dan pemisah baris yang tepat memudahkan inspeksi objek bersarang, menemukan kesalahan, dan memahami struktur data kompleks dengan mudah.
• Debugging: Memecahkan masalah data yang tidak valid atau tak terduga jauh lebih sederhana saat Anda bisa melihat dan melacak kunci, nilai, dan tingkat bersarang secara visual.
• Kolaborasi: JSON yang diformat dengan baik lebih mudah ditinjau, didiskusikan, dan diedit dalam tinjauan kode, dokumentasi, atau berkas bersama.
• Kontrol Versi: Git dan alat VCS lain menghasilkan perbedaan (diff) yang lebih jelas dengan JSON yang diformat, memudahkan pelacakan perubahan dari waktu ke waktu.
• Kepatuhan: Banyak panduan gaya dan linter otomatis (seperti Prettier, ESLint, atau jq) menerapkan format konsisten untuk kejelasan dan standarisasi.
• Kompatibilitas Alat: Beberapa API, CLI, dan editor mengharapkan input yang diformat agar mudah interaksi manusia atau pencatatan (logging).

Bagaimana Cara Kerja Formatter JSON?

1. Parsing: Formatter mencoba mengurai teks input Anda dengan parser JSON yang ketat. Langkah ini memeriksa validitas sintaks—mengidentifikasi masalah seperti kutipan yang hilang, koma tambahan, atau karakter tak terescape.
2. Cetak Cantik: Setelah valid, data yang diuraikan diserialisasi ulang menjadi string dengan indentasi yang ditentukan pengguna (biasanya 2 atau 4 spasi) dan pemisah baris, menghasilkan versi "cetak cantik".

Jika input bukan JSON yang valid, formatter akan menampilkan kesalahan atau pesan yang membantu menunjukkan lokasi dan jenis masalah.

Opsi Pemformatan

• Indentasi: Atur jumlah spasi per tingkat (hingga 8).
• Urutkan kunci objek secara alfabetis
• Gunakan tab untuk indentasi menggantikan spasi
• Ubah karakter non-ASCII menjadi Unicode
• Minify output (baris tunggal, tanpa spasi)

Masalah Umum yang Diselesaikan dengan Pemformatan

• JSON Baris Tunggal/Minify: Data yang dikembalikan dari API atau file log sering diminyaki untuk efisiensi bandwidth, membuat pengeditan manual sulit. Pemformatan mengembalikan keterbacaan untuk tinjauan dan pengeditan.
• Indentasi Tidak Konsisten: JSON yang ditempel dari berbagai sumber mungkin memiliki campuran tab, spasi, atau kedalaman indentasi yang tidak konsisten. Pemformatan ulang menormalkan perbedaan ini, meningkatkan kejelasan dan konsistensi.
• Struktur Besar/Bersarang: Array atau objek yang sangat dalam (seperti file konfigurasi atau respons API kompleks) menjadi lebih mudah ditangani dan dinavigasi saat diformat, dengan tampilan yang dapat diperkecil di editor yang mendukung.

Kasus Nyata: Memformat Respons API

Saat berintegrasi dengan API pihak ketiga (seperti AWS, Stripe, atau Google Cloud), respons sering dibuat ringkas untuk kecepatan. Memformat output JSON mempermudah inspeksi untuk menemukan field yang hilang, debug nilai tak terduga, atau berbagi dengan tim.

{"amount":2500,"currency":"usd","status":"succeeded","charges":[{"id":"ch_1Gq","amount":2500}]}

{
  "amount": 2500,
  "currency": "usd",
  "status": "succeeded",
  "charges": [
    {
      "id": "ch_1Gq",
      "amount": 2500
    }
  ]
}

Cara Memformat JSON dengan Alat Ini

1. Tempel atau unggah JSON mentah, minify, atau yang diformat buruk ke area input.
2. Pilih opsi pemformatan (ukuran indentasi, urutkan kunci, dll).
3. Klik "Format" untuk memproses input Anda.
4. Lihat atau salin hasil yang bersih dan mudah dibaca. Jika ditemukan kesalahan, pesan sintaks rinci akan muncul untuk membantu memperbaiki JSON.

Semua pemformatan dilakukan dengan aman di browser Anda — data Anda tidak pernah keluar dari perangkat.

Contoh Kode untuk Pemformatan JSON

Lihat cara memformat JSON dalam berbagai bahasa pemrograman. Contoh-contoh ini menunjukkan teknik pemformatan dasar yang mudah dipahami.

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

import json
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = json.dumps(json.loads(ugly), indent=2)
print(pretty)

package main
import (
  "encoding/json"
  "fmt"
)
func main() {
  ugly := []byte(`{"name":"Alice","age":30,"roles":["admin","user"]}`)
  var obj interface{}
  json.Unmarshal(ugly, &obj)
  pretty, _ := json.MarshalIndent(obj, "", "  ")
  fmt.Println(string(pretty))
}

import com.fasterxml.jackson.databind.ObjectMapper;
public class Main {
  public static void main(String[] args) throws Exception {
    String ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    ObjectMapper mapper = new ObjectMapper();
    Object obj = mapper.readValue(ugly, Object.class);
    String pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj);
    System.out.println(pretty);
  }
}

using System;
using Newtonsoft.Json;
class Program {
  static void Main() {
    var ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    var parsed = JsonConvert.DeserializeObject(ugly);
    var pretty = JsonConvert.SerializeObject(parsed, Formatting.Indented);
    Console.WriteLine(pretty);
  }
}

<?php
$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
$obj = json_decode($ugly);
echo json_encode($obj, JSON_PRETTY_PRINT);

require 'json'
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = JSON.pretty_generate(JSON.parse(ugly))
puts pretty

echo '{"name":"Alice","age":30,"roles":["admin","user"]}' | jq .

fn main() {
  let ugly = r#"{"name":"Alice","age":30,"roles":["admin","user"]}"#;
  let value: serde_json::Value = serde_json::from_str(ugly).unwrap();
  let pretty = serde_json::to_string_pretty(&value).unwrap();
  println!("{}", pretty);
}

import com.fasterxml.jackson.databind.ObjectMapper
fun main() {
  val ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}"
  val mapper = ObjectMapper()
  val obj = mapper.readValue(ugly, Any::class.java)
  val pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj)
  println(pretty)
}

import Foundation
let ugly = "{\"name\":\"Alice\",\"age\":30,\"roles\":[\"admin\",\"user\"]}"
if let data = ugly.data(using: .utf8),
   let obj = try? JSONSerialization.jsonObject(with: data),
   let pretty = try? JSONSerialization.data(withJSONObject: obj, options: .prettyPrinted),
   let prettyString = String(data: pretty, encoding: .utf8) {
    print(prettyString)
}

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

SELECT jsonb_pretty('{"name":"Alice","age":30,"roles":["admin","user"]}'::jsonb);

SELECT JSON_PRETTY('{"name":"Alice","age":30,"roles":["admin","user"]}');

$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
$obj = $ugly | ConvertFrom-Json
$pretty = $obj | ConvertTo-Json -Depth 10
Write-Output $pretty

use JSON;
my $ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
my $obj = decode_json($ugly);
print to_json($obj, { pretty => 1 });

import 'dart:convert';
void main() {
  const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
  final obj = jsonDecode(ugly);
  final pretty = JsonEncoder.withIndent('  ').convert(obj);
  print(pretty);
}

ugly = ~s({"name":"Alice","age":30,"roles":["admin","user"]})
{:ok, obj} = Jason.decode(ugly)
pretty = Jason.encode!(obj, pretty: true)
IO.puts(pretty)

import play.api.libs.json._
object Main extends App {
  val ugly = """{"name":"Alice","age":30,"roles":["admin","user"]}"""
  val jsValue = Json.parse(ugly)
  val pretty = Json.prettyPrint(jsValue)
  println(pretty)
}