Formatter & Beautifier JSON: Cetak JSON dengan Indentasi

Pemformat JSON

Pendahuluan

JSON (JavaScript Object Notation) adalah format pertukaran data ringan yang telah menjadi standar untuk pertukaran data dalam aplikasi web. Meskipun sederhana, data JSON dapat menjadi sulit dibaca ketika diminifikasi atau tidak memiliki format yang tepat. Alat ini membantu Anda mengubah string JSON mentah yang tidak terformat menjadi format berstruktur dan terindentasi yang jauh lebih mudah dibaca dan dianalisis.

Pemformatan JSON (juga dikenal sebagai "pretty printing") menambahkan indentasi yang konsisten, jeda baris, dan spasi untuk membuat struktur hierarkis data JSON terlihat jelas. Ini sangat berharga ketika bekerja dengan objek bersarang yang kompleks atau kumpulan data besar di mana hubungan antar elemen mungkin sulit dikenali.

Alat pemformat JSON kami menyediakan antarmuka sederhana untuk mempercantik data JSON Anda dengan indentasi dan struktur yang tepat, menjadikannya lebih mudah dibaca oleh manusia sambil mempertahankan validitasnya untuk mesin.

Sintaks dan Struktur JSON

JSON dibangun di atas dua struktur utama:

Objek: Koleksi pasangan nama/nilai yang diapit dalam kurung kurawal {}. Setiap nama diikuti oleh titik dua : dan pasangan dipisahkan oleh koma ,.

1   {"name": "John", "age": 30, "city": "New York"}
2

Array: Daftar nilai berurutan yang diapit dalam kurung siku []. Nilai dipisahkan oleh koma ,.

1   ["apple", "banana", "cherry"]
2

Nilai JSON dapat berupa:

String (dalam tanda kutip ganda): "Hello World"
Angka: 42 atau 3.14159
Boolean: true atau false
Null: null
Objek: {"key": "value"}
Array: [1, 2, 3]

JSON yang benar harus mengikuti aturan sintaks ini:

Nama harus berupa string dalam tanda kutip ganda
Nilai harus salah satu dari tipe data JSON yang valid
Tidak diperbolehkan ada koma di akhir
Tidak diperbolehkan ada komentar
Tidak diperbolehkan ada fungsi atau metode

Kesalahan sintaks umum meliputi:

Kurung/kurung kurawal yang hilang atau tidak cocok
Nama properti tidak diberi tanda kutip
Menggunakan tanda kutip tunggal alih-alih tanda kutip ganda
Menyertakan koma di akhir
Menggunakan undefined sebagai nilai

Bagaimana Pemformatan JSON Bekerja

Pemformatan JSON mengubah JSON yang kompak dan diminifikasi menjadi bentuk yang lebih mudah dibaca dengan:

Parsing: String JSON pertama-tama diurai untuk memastikan validitasnya dan untuk membuat representasi struktur data dalam memori.
Indentasi: Setiap level bersarang dari objek dan array diindentasi (biasanya dengan 2 atau 4 spasi) untuk secara visual mewakili hierarki.
Jeda Baris: Baris baru ditambahkan setelah setiap properti atau elemen array untuk meningkatkan keterbacaan.
Spasi: Spasi yang konsisten ditambahkan di sekitar titik dua dan koma.

Sebagai contoh, JSON yang diminifikasi ini:

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

Menjadi JSON yang diformat ini:

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

Pemformat kami menggunakan indentasi standar 2 spasi per level, yang merupakan konvensi umum dalam komunitas pengembangan dan memberikan keseimbangan yang baik antara kekompakan dan keterbacaan.

Validasi JSON

Aspek penting dari pemformatan JSON adalah validasi. Sebelum JSON dapat diformat, itu harus secara sintaksis valid menurut spesifikasi JSON. Kesalahan validasi umum meliputi:

Kesalahan Sintaks:
- Nama properti tanpa tanda kutip
- Koma yang hilang atau berlebihan
- Struktur bersarang yang tidak tepat
- String, objek, atau array yang tidak ditutup
Kesalahan Tipe Data:
- Menggunakan nilai spesifik JavaScript seperti undefined atau NaN
- Menyertakan fungsi atau metode
- Menggunakan tanda kutip tunggal untuk string

Ketika Anda menemukan JSON yang tidak valid, pesan kesalahan dapat membantu mengidentifikasi masalah. Sebagian besar parser JSON akan menunjukkan posisi di mana parsing gagal, yang dapat membantu menemukan masalahnya. Alat kami menyediakan pesan kesalahan yang jelas untuk membantu Anda mengidentifikasi dan memperbaiki masalah dalam data JSON Anda.

Kasus Penggunaan

Pemformatan JSON berharga dalam berbagai skenario:

Pengembangan dan Pengujian API

Ketika bekerja dengan API RESTful, JSON yang diformat memudahkan untuk:

Memeriksa payload respons
Men-debug body permintaan
Mendokumentasikan contoh API
Memverifikasi struktur data sesuai dengan ekspektasi

Manajemen Konfigurasi

Banyak aplikasi modern menggunakan JSON untuk konfigurasi:

File pengaturan aplikasi
Konfigurasi lingkungan
Spesifikasi build dan deployment
Template Infrastruktur sebagai Kode (misalnya, AWS CloudFormation, Terraform)

Analisis dan Visualisasi Data

JSON yang diformat membantu ketika:

Mengeksplorasi dataset
Mempersiapkan data untuk visualisasi
Memahami skema data
Mengidentifikasi pola dalam data terstruktur

Debugging dan Pemecahan Masalah

JSON yang diformat dengan benar sangat penting ketika:

Men-debug aplikasi web
Memeriksa localStorage atau sessionStorage
Menganalisis respons jaringan
Memecahkan masalah integrasi data

Tujuan Pendidikan

Pemformatan JSON yang jelas berharga untuk:

Mengajarkan struktur data
Mendemonstrasikan hubungan bersarang
Menjelaskan konsep API
Mengilustrasikan prinsip pemodelan data

Alternatif

Meskipun pemformat JSON berbasis web kami nyaman untuk tugas pemformatan cepat, beberapa alternatif ada untuk skenario yang berbeda:

Alat Pengembang Browser

Browser modern menyertakan kemampuan pemformatan JSON:

Chrome dan Edge DevTools secara otomatis memformat respons JSON di tab Network
Penampil JSON Firefox menyediakan tampilan pohon interaktif
Ekstensi browser seperti JSONView dapat memformat JSON langsung di browser

Editor Kode dan IDE

Sebagian besar lingkungan pengembangan menawarkan pemformatan JSON:

Visual Studio Code memiliki pemformatan JSON bawaan (Alt+Shift+F)
IDE JetBrains (WebStorm, IntelliJ) mencakup alat JSON yang kuat
Sublime Text dan Atom mendukung pemformatan JSON melalui plugin

Alat Command Line

Untuk pengguna terminal atau otomatisasi:

jq adalah prosesor JSON command-line yang kuat
json_pp sudah terinstal di banyak sistem Unix
python -m json.tool menyediakan pemformatan cepat menggunakan Python

Pendekatan Programatis

Ketika memformat JSON dalam aplikasi:

1// JavaScript
2const formatted = JSON.stringify(jsonObject, null, 2);
3

1# Python
2import json
3formatted = json.dumps(json_object, indent=2)
4

1// Java with Gson
2Gson gson = new GsonBuilder().setPrettyPrinting().create();
3String formatted = gson.toJson(jsonObject);
4

1# Ruby
2require 'json'
3formatted = JSON.pretty_generate(json_object)
4

1// PHP
2$formatted = json_encode($jsonObject, JSON_PRETTY_PRINT);
3

Sejarah

JSON dibuat oleh Douglas Crockford pada awal tahun 2000-an sebagai alternatif ringan untuk XML. Format ini berasal dari sintaks literal objek JavaScript tetapi dirancang untuk menjadi independen bahasa. Pada tahun 2006, JSON secara resmi ditentukan dalam RFC 4627, dan dengan cepat mendapatkan popularitas karena kesederhanaan dan kompatibilitasnya dengan JavaScript.

Sebelum JSON, XML adalah format dominan untuk pertukaran data, tetapi verbositasnya dan kompleksitasnya membuatnya rumit untuk banyak aplikasi. JSON menawarkan sintaks yang lebih ringkas yang lebih mudah dibaca dan ditulis, baik oleh manusia maupun mesin. Ini juga selaras sempurna dengan model objek JavaScript, menjadikannya pilihan alami untuk aplikasi web.

Adopsi JSON dipercepat dengan munculnya AJAX dan API RESTful pada pertengahan 2000-an. Pada 2010-an, ia telah menjadi standar de facto untuk API web, file konfigurasi, dan penyimpanan data dalam database NoSQL seperti MongoDB dan CouchDB.

Saat ini, JSON didukung oleh hampir setiap bahasa pemrograman dan digunakan dalam banyak aplikasi di seluruh web. Kesederhanaan, fleksibilitas, dan dukungan universalnya telah menjadikannya salah satu format data paling penting dalam komputasi modern.

Contoh Kode

Berikut adalah contoh cara memformat JSON dalam berbagai bahasa pemrograman:

1// Pemformatan JSON JavaScript
2function formatJSON(jsonString) {
3  try {
4    const parsedData = JSON.parse(jsonString);
5    return JSON.stringify(parsedData, null, 2);
6  } catch (error) {
7    return `Error: ${error.message}`;
8  }
9}
10
11// Contoh penggunaan
12const rawJSON = '{"name":"John","age":30,"city":"New York"}';
13console.log(formatJSON(rawJSON));
14

1# Pemformatan JSON Python
2import json
3
4def format_json(json_string):
5    try:
6        parsed_data = json.loads(json_string)
7        return json.dumps(parsed_data, indent=2)
8    except json.JSONDecodeError as e:
9        return f"Error: {str(e)}"
10
11# Contoh penggunaan
12raw_json = '{"name":"John","age":30,"city":"New York"}'
13print(format_json(raw_json))
14

1// Pemformatan JSON Java dengan Gson
2import com.google.gson.Gson;
3import com.google.gson.GsonBuilder;
4import com.google.gson.JsonSyntaxException;
5
6public class JSONFormatter {
7    public static String formatJSON(String jsonString) {
8        try {
9            Gson gson = new GsonBuilder().setPrettyPrinting().create();
10            Object parsedJson = gson.fromJson(jsonString, Object.class);
11            return gson.toJson(parsedJson);
12        } catch (JsonSyntaxException e) {
13            return "Error: " + e.getMessage();
14        }
15    }
16    
17    public static void main(String[] args) {
18        String rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
19        System.out.println(formatJSON(rawJSON));
20    }
21}
22

1// Pemformatan JSON PHP
2function formatJSON($jsonString) {
3    $result = json_decode($jsonString);
4    if (json_last_error() !== JSON_ERROR_NONE) {
5        return "Error: " . json_last_error_msg();
6    }
7    return json_encode($result, JSON_PRETTY_PRINT);
8}
9
10// Contoh penggunaan
11$rawJSON = '{"name":"John","age":30,"city":"New York"}';
12echo formatJSON($rawJSON);
13

1# Pemformatan JSON Ruby
2require 'json'
3
4def format_json(json_string)
5  begin
6    parsed_data = JSON.parse(json_string)
7    return JSON.pretty_generate(parsed_data)
8  rescue JSON::ParserError => e
9    return "Error: #{e.message}"
10  end
11end
12
13# Contoh penggunaan
14raw_json = '{"name":"John","age":30,"city":"New York"}'
15puts format_json(raw_json)
16

1// Pemformatan JSON C# dengan Newtonsoft.Json
2using Newtonsoft.Json;
3using System;
4
5class JSONFormatter
6{
7    public static string FormatJSON(string jsonString)
8    {
9        try
10        {
11            object parsedJson = JsonConvert.DeserializeObject(jsonString);
12            return JsonConvert.SerializeObject(parsedJson, Formatting.Indented);
13        }
14        catch (JsonException e)
15        {
16            return $"Error: {e.Message}";
17        }
18    }
19    
20    static void Main()
21    {
22        string rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
23        Console.WriteLine(FormatJSON(rawJSON));
24    }
25}
26

1// Pemformatan JSON Go
2package main
3
4import (
5    "encoding/json"
6    "fmt"
7)
8
9func formatJSON(jsonString string) string {
10    var parsedData interface{}
11    err := json.Unmarshal([]byte(jsonString), &parsedData)
12    if err != nil {
13        return fmt.Sprintf("Error: %s", err.Error())
14    }
15    
16    formattedBytes, err := json.MarshalIndent(parsedData, "", "  ")
17    if err != nil {
18        return fmt.Sprintf("Error: %s", err.Error())
19    }
20    
21    return string(formattedBytes)
22}
23
24func main() {
25    rawJSON := `{"name":"John","age":30,"city":"New York"}`
26    fmt.Println(formatJSON(rawJSON))
27}
28

Kasus Khusus dan Pertimbangan

Ketika bekerja dengan pemformatan JSON, perhatikan tantangan potensial ini:

File JSON Besar

File JSON yang sangat besar (beberapa megabyte atau lebih) dapat menyebabkan masalah kinerja dalam pemformat berbasis browser. Untuk kasus seperti ini:

Pertimbangkan untuk menggunakan alat command-line seperti jq
Pecah JSON menjadi potongan-potongan yang lebih kecil
Gunakan parser streaming untuk pemrosesan tanpa memuat seluruh file ke dalam memori

Struktur Bersarang Dalam

JSON yang sangat bersarang (lebih dari 10-20 level dalam) dapat menjadi sulit untuk dinavigasi bahkan ketika diformat. Dalam kasus ini:

Pertimbangkan untuk meratakan struktur jika memungkinkan
Gunakan penampil JSON yang dapat dilipat
Ekstrak dan bekerja dengan bagian tertentu dari JSON

Karakter Khusus dan Unicode

JSON mendukung Unicode, tetapi beberapa pemformat mungkin memiliki masalah dengan karakter tertentu:

Pastikan pemformat Anda dengan benar menangani emoji dan karakter Unicode lainnya
Berhati-hatilah dengan karakter kontrol dan urutan escape
Verifikasi bahwa output yang diformat menyimpan semua karakter asli

Presisi Numerik

JSON tidak menentukan presisi untuk angka, yang dapat menyebabkan masalah dengan bilangan bulat yang sangat besar atau nilai floating-point:

Ketahuilah bahwa beberapa implementasi JavaScript mungkin kehilangan presisi untuk bilangan bulat lebih dari 53 bit
Pertimbangkan untuk menggunakan representasi string untuk nilai numerik yang presisi
Uji dengan nilai ekstrem jika aplikasi Anda membutuhkan presisi tinggi

Objek dan Array Kosong

JSON yang valid mencakup objek kosong {} dan array [], yang harus diformat dengan benar:

Objek kosong harus muncul sebagai {}
Array kosong harus muncul sebagai []
Struktur kosong bersarang harus mempertahankan indentasi yang tepat

Referensi

JSON.org - Situs web spesifikasi JSON resmi
RFC 8259 - Format Pertukaran Data JSON
MDN Web Docs: JSON - Dokumentasi komprehensif tentang JSON di JavaScript
JSON Lint - Validator JSON online populer
jq - Prosesor JSON command-line yang ringan dan fleksibel

Whiz Tools

Formatter & Beautifier JSON: Cetak JSON dengan Indentasi

Formatter JSON

Dokumentasi