Formatter JSON

Apa Itu Pemformatan JSON?

Pemformatan JSON adalah proses menukar data JSON ke bentuk yang konsisten dan mudah dibaca manusia dengan menambah indentasi, ruang kosong dan pecahan baris—tanpa mengubah struktur atau kandungannya. Pemformatan betul menjadikan JSON lebih mudah diperiksa, disemak, dikongsi, dan disunting, sambil memastikan keserasian dengan mesin dan alat perisian.

JSON, mengikut definisi, mengabaikan ruang kosong di luar nilai string. Namun, JSON yang tidak berformat dengan baik (atau kecilkan)—tanpa indentasi atau disatukan menjadi satu baris—boleh jadi hampir mustahil untuk manusia membaca atau mengubahnya dengan selamat.

Pemformatan vs Pengecilan JSON

• Pemformatan menambah ruang kosong, indentasi dan pecahan baris bagi kejelasan dan kebolehbacaan.
• Pengecilan membuang semua ruang kosong yang tidak perlu untuk kepadatan maksimum dan kecekapan dalam penyimpanan atau pemindahan.
• Formatter JSON yang mantap membolehkan anda bertukar antara mod ini, memudahkan bertukar antara versi mesra manusia dan yang dioptimumkan mesin mengikut keperluan.

Contoh: JSON Kecilkan 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?

• Kebolehbacaan: Indentasi dan pecahan baris yang betul memudahkan pemeriksaan objek terbenam, mengenal pasti kesilapan, dan memahami struktur data yang rumit dengan cepat.
• Penyahpepijatan: Menyiasat data tidak sah atau tidak dijangka lebih mudah apabila anda boleh mengimbas dan menjejaki kunci, nilai, dan tahap penanaman secara visual.
• Kerjasama: JSON yang diformatkan dengan baik lebih mudah untuk disemak, dibincang, dan disunting dalam semakan kod, dokumentasi, atau fail dikongsi.
• Kawalan Versi: Git dan alat VCS lain menghasilkan perbezaan yang lebih bermakna dengan JSON yang diformat, memudahkan penjejakan perubahan sepanjang masa.
• Pematuhan: Banyak panduan gaya dan pelinter automatik (seperti Prettier, ESLint, atau jq) mengharuskan pemformatan konsisten untuk kejelasan dan standardisasi.
• Keserasian Alat: Sesetengah API, CLI, dan penyunting mengharapkan input yang diformat untuk interaksi manusia atau log yang lebih mudah.

Bagaimana Formatter JSON Berfungsi?

1. Parsing: Formatter terlebih dahulu cuba mengurai teks input anda menggunakan parser JSON yang ketat. Langkah ini memeriksa kesahan sintaks—mengesan isu seperti petikan hilang, koma lebihan, atau aksara tanpa pemuatan.
2. Cetakan Cantik: Setelah sah, data yang diurai diserlahkan kembali ke rentetan dengan indentasi dan pecahan baris yang ditetapkan pengguna (biasanya 2 atau 4 ruang), menghasilkan versi "cantik dicetak".

Jika input bukan JSON sah, formatter akan memunculkan ralat atau memberikan mesej membantu yang menunjukkan lokasi dan sifat masalah.

Pilihan Pemformatan

• Indentasi: Tetapkan bilangan ruang setiap aras (sehingga 8).
• Susun kunci objek secara abjad
• Gunakan tab untuk indentasi menggantikan ruang
• Pelesap aksara bukan ASCII sebagai Unicode
• Kecilkan output (baris tunggal, tiada ruang)

Isu Biasa Yang Diselesaikan Dengan Pemformatan

• JSON Baris Tunggal/Kecilkan: Data dari API atau fail log sering dikecilkan untuk efisiensi jalur lebar, menyukarkan penyuntingan manual. Pemformatan mengembalikan kebolehbacaan untuk semakan dan penyuntingan.
• Indentasi Tidak Konsisten: JSON yang ditampal dari pelbagai sumber mungkin mengandungi gabungan tab, ruang, atau kedalaman indentasi tidak konsisten. Pemformatan semula menormalkan beza ini, meningkatkan kejelasan dan konsistensi.
• Struktur Besar/Terbenam: Susunan atau objek mendalam (seperti fail konfigurasi atau respons API kompleks) menjadi mudah dikendalikan dan dinavigasi apabila diformat, dengan paparan boleh lipat dalam penyunting yang disokong.

Kes Penggunaan Dunia Sebenar: Memformat Respons API

Apabila integrasi dengan API pihak ketiga (seperti AWS, Stripe, atau Google Cloud), respons sering dipadatkan untuk kelajuan. Memformat output JSON memudahkan pemeriksaan bagi medan hilang, penyahpepijatan nilai tidak dijangka, atau perkongsian dengan rakan sekerja.

{"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. Tampal atau muat naik JSON mentah, kecilkan, atau yang diformat dengan tidak baik ke kawasan input.
2. Pilih pilihan pemformatan (saiz indentasi, susun kunci, dll).
3. Klik "Format" untuk memproses input anda.
4. Lihat atau salin output yang bersih dan mudah dibaca. Jika terdapat ralat, mesej sintaks terperinci akan muncul untuk membantu anda membetulkan JSON.

Semua pemformatan dilakukan dengan selamat dalam pelayar anda—data anda tidak pernah keluar dari peranti.

Contoh Kod untuk Pemformatan JSON

Lihat cara memformat JSON dalam pelbagai bahasa pengaturcaraan. Contoh-contoh ini menunjukkan teknik asas pemformatan.

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)
}