Formatter & Beautifier JSON: Cetak JSON dengan Indentasi

JSON Formatter

Pengenalan

JSON (JavaScript Object Notation) adalah format pertukaran data ringan yang telah menjadi standard untuk pertukaran data dalam aplikasi web. Walaupun ia ringkas, data JSON boleh menjadi sukar dibaca apabila ia diminified atau tidak mempunyai format yang betul. Alat ini membantu anda mengubah rentetan JSON yang tidak diformat kepada bentuk yang terstruktur dengan baik, dengan indentasi yang sesuai yang lebih mudah dibaca dan dianalisis.

Pengformatan JSON (juga dikenali sebagai "pretty printing") menambah indentasi yang konsisten, pemisahan baris, dan ruang untuk menjadikan struktur hierarki data JSON lebih jelas secara visual. Ini sangat berharga apabila bekerja dengan objek bersarang yang kompleks atau dataset besar di mana hubungan antara elemen mungkin sukar untuk dilihat.

Alat pengformat JSON kami menyediakan antara muka yang mudah untuk mempercantik data JSON anda dengan indentasi yang betul dan struktur, menjadikannya lebih mudah dibaca untuk manusia sambil mengekalkan kesahihannya untuk mesin.

Sintaks dan Struktur JSON

JSON dibina berdasarkan dua struktur utama:

Objek: Koleksi pasangan nama/nilai yang ditutup dalam kurungan kerinting {}. Setiap nama diikuti dengan titik dua : dan pasangan dipisahkan dengan koma ,.

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

Array: Senarai teratur nilai yang ditutup dalam kurungan siku []. Nilai dipisahkan dengan koma ,.

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

Nilai JSON boleh menjadi:

Rentetan (dalam tanda petik dua): "Hello World"
Nombor: 42 atau 3.14159
Boolean: true atau false
Null: null
Objek: {"key": "value"}
Array: [1, 2, 3]

JSON yang betul mesti mengikuti peraturan sintaks ini:

Nama mesti dalam rentetan dalam tanda petik dua
Nilai mesti salah satu jenis data JSON yang sah
Tiada koma yang tinggal dibenarkan
Tiada komen dibenarkan
Tiada fungsi atau kaedah dibenarkan

Kesalahan sintaks biasa termasuk:

Kurang atau tidak sepadan kurungan/kerinting
Tiada tanda petik di sekitar nama harta
Menggunakan tanda petik tunggal daripada tanda petik dua
Termasuk koma yang tinggal
Menggunakan nilai tidak ditakrifkan

Cara Pengformatan JSON Berfungsi

Pengformatan JSON mengubah JSON yang padat dan diminified kepada bentuk yang lebih mudah dibaca dengan:

Memapar: Rentetan JSON pertama kali dipapar untuk memastikan ia sah dan untuk membuat representasi dalam memori bagi struktur data.
Indentasi: Setiap tahap bersarang objek dan array diindentasikan (biasanya dengan 2 atau 4 ruang) untuk mewakili hierarki secara visual.
Pemisahan Baris: Barisan baru ditambah selepas setiap harta atau elemen array untuk meningkatkan kebolehbaca.
Ruang: Ruang yang konsisten ditambah di sekitar titik dua dan koma.

Sebagai contoh, JSON yang diminified 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

Pengformat kami menggunakan indentasi standard 2 ruang setiap tahap, yang merupakan konvensyen biasa dalam komuniti pembangunan dan memberikan keseimbangan yang baik antara kepadatan dan kebolehbaca.

Pengesahan JSON

Aspek kritikal pengformatan JSON adalah pengesahan. Sebelum JSON boleh diformat, ia mesti sah dari segi sintaks mengikut spesifikasi JSON. Kesalahan pengesahan biasa termasuk:

Kesalahan Sintaks:
- Nama harta yang tidak dipetik
- Koma yang hilang atau berlebihan
- Struktur yang tidak sepadan
- Rentetan, objek, atau array yang tidak ditutup
Kesalahan Jenis Data:
- Menggunakan nilai khusus JavaScript seperti undefined atau NaN
- Termasuk fungsi atau kaedah
- Menggunakan tanda petik tunggal untuk rentetan

Apabila anda menghadapi JSON yang tidak sah, mesej kesalahan boleh membantu mengenal pasti isu tersebut. Kebanyakan pemapar JSON akan menunjukkan kedudukan di mana pemaparan gagal, yang boleh membantu mencari masalah. Alat kami menyediakan mesej kesalahan yang jelas untuk membantu anda mengenal pasti dan membetulkan isu dalam data JSON anda.

Kes Penggunaan

Pengformatan JSON adalah berharga dalam pelbagai senario:

Pembangunan dan Ujian API

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

Memeriksa payload respons
Menyelesaikan masalah badan permintaan
Mendokumentasikan contoh API
Mengesahkan struktur data sepadan dengan jangkaan

Pengurusan Konfigurasi

Banyak aplikasi moden menggunakan JSON untuk konfigurasi:

Fail tetapan aplikasi
Konfigurasi persekitaran
Spesifikasi binaan dan penyebaran
Templat Infrastruktur sebagai Kod (contohnya, AWS CloudFormation, Terraform)

Analisis Data dan Visualisasi

Pengformatan JSON membantu apabila:

Menjelajahi dataset
Menyediakan data untuk visualisasi
Memahami skema data
Mengenal pasti corak dalam data terstruktur

Menyelesaikan Masalah dan Penyelesaian

Pengformatan JSON yang betul adalah penting apabila:

Menyelesaikan masalah aplikasi web
Memeriksa localStorage atau sessionStorage
Menganalisis respons rangkaian
Menyelesaikan masalah isu integrasi data

Tujuan Pendidikan

Pengformatan JSON yang jelas adalah berharga untuk:

Mengajar struktur data
Menunjukkan hubungan bersarang
Menjelaskan konsep API
Menggambarkan prinsip pemodelan data

Alternatif

Walaupun pengformat JSON berasaskan web kami adalah mudah untuk tugas pengformatan cepat, beberapa alternatif wujud untuk senario yang berbeza:

Alat Pembangun Pelayar

Pelayan moden termasuk keupayaan pengformatan JSON:

DevTools Chrome dan Edge secara automatik memformat respons JSON dalam tab Rangkaian
Pemandu JSON Firefox menyediakan pandangan pokok interaktif
Sambungan pelayar seperti JSONView boleh memformat JSON terus dalam pelayar

Penyunting Kod dan IDE

Kebanyakan persekitaran pembangunan menawarkan pengformatan JSON:

Visual Studio Code mempunyai pengformatan JSON terbina dalam (Alt+Shift+F)
IDE JetBrains (WebStorm, IntelliJ) termasuk alat JSON yang kuat
Sublime Text dan Atom menyokong pengformatan JSON melalui plugin

Alat Baris Perintah

Untuk pengguna terminal atau automasi:

jq adalah pemproses JSON berasaskan baris perintah yang kuat
json_pp datang pra-pasang pada banyak sistem Unix
python -m json.tool menyediakan pengformatan cepat menggunakan Python

Pendekatan Berprogram

Apabila memformat JSON dalam aplikasi:

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

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

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

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

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

Sejarah

JSON dicipta oleh Douglas Crockford pada awal 2000-an sebagai alternatif ringan kepada XML. Format ini berasal dari sintaks literal objek JavaScript tetapi direka untuk bebas bahasa. Pada tahun 2006, JSON secara rasmi ditentukan dalam RFC 4627, dan ia dengan cepat mendapat populariti kerana kesederhanaannya dan kesesuaian dengan JavaScript.

Sebelum JSON, XML adalah format dominan untuk pertukaran data, tetapi kebesarannya dan kompleksitinya menjadikannya sukar untuk banyak aplikasi. JSON menawarkan sintaks yang lebih ringkas yang lebih mudah dibaca dan ditulis, baik untuk manusia dan mesin. Ia juga selaras dengan model objek JavaScript, menjadikannya pilihan semula jadi untuk aplikasi web.

Penerimaan JSON dipercepatkan dengan kebangkitan AJAX dan API RESTful pada pertengahan 2000-an. Menjelang tahun 2010-an, ia telah menjadi standard de facto untuk API web, fail konfigurasi, dan penyimpanan data dalam pangkalan data NoSQL seperti MongoDB dan CouchDB.

Hari ini, JSON disokong oleh hampir setiap bahasa pengaturcaraan dan digunakan dalam banyak aplikasi di seluruh web. Kesederhanaannya, fleksibilitinya, dan sokongan sejagat telah menjadikannya salah satu format data yang paling penting dalam pengkomputeran moden.

Contoh Kod

Berikut adalah contoh cara untuk memformat JSON dalam pelbagai bahasa pengaturcaraan:

1// Pengformatan 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# Pengformatan 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// Pengformatan 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// Pengformatan 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# Pengformatan 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// Pengformatan 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// Pengformatan 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

Kes-Kes Tepi dan Pertimbangan

Apabila bekerja dengan pengformatan JSON, ambil perhatian terhadap cabaran berpotensi ini:

Fail JSON Besar

Fail JSON yang sangat besar (beberapa megabait atau lebih) boleh menyebabkan masalah prestasi dalam pemformat berasaskan pelayar. Untuk kes-kes seperti itu:

Pertimbangkan untuk menggunakan alat baris perintah seperti jq
Bahagikan JSON kepada bahagian yang lebih kecil
Gunakan pemapar aliran untuk memproses tanpa memuatkan keseluruhan fail ke dalam memori

Struktur Bersarang Dalam

JSON yang sangat bersarang (lebih daripada 10-20 tahap dalam) boleh menjadi sukar untuk dinavigasi walaupun ketika diformat. Dalam kes-kes ini:

Pertimbangkan untuk meratakan struktur jika boleh
Gunakan pemapar JSON yang boleh dilipat
Ekstrak dan bekerja dengan bahagian tertentu dari JSON

Watak Khas dan Unicode

JSON menyokong Unicode, tetapi beberapa pemformat mungkin mempunyai masalah dengan watak tertentu:

Pastikan pemformat anda menangani emoji dan watak Unicode lain dengan betul
Berhati-hati dengan watak kawalan dan urutan pelarian
Sahkan bahawa output yang diformat mengekalkan semua watak asal

Ketepatan Nombor

JSON tidak menentukan ketepatan untuk nombor, yang boleh menyebabkan masalah dengan integer yang sangat besar atau nilai titik terapung:

Berhati-hati bahawa beberapa pelaksanaan JavaScript mungkin kehilangan ketepatan untuk integer melebihi 53 bit
Pertimbangkan untuk menggunakan representasi rentetan untuk nilai numerik yang tepat
Uji dengan nilai ekstrem jika aplikasi anda memerlukan ketepatan tinggi

Objek dan Array Kosong

JSON yang sah termasuk objek kosong {} dan array [], yang harus diformat dengan betul:

Objek kosong harus muncul sebagai {}
Array kosong harus muncul sebagai []
Struktur kosong bersarang harus mengekalkan indentasi yang betul

Rujukan

JSON.org - Laman web spesifikasi JSON rasmi
RFC 8259 - Format Pertukaran Data JSON
MDN Web Docs: JSON - Dokumentasi komprehensif mengenai JSON dalam JavaScript
JSON Lint - Pemvalid JSON dalam talian yang popular
jq - Pemproses JSON berasaskan baris perintah yang ringan dan fleksibel

Whiz Tools

Formatter & Beautifier JSON: Cetak JSON dengan Indentasi

Pemformat JSON

Dokumentasi