Whiz Tools

Pemformat JSON

Format dan cantikkan JSON anda dengan alat mudah ini

JSON terformat akan muncul di sini...

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:

  1. Objek: Koleksi pasangan nama/nilai yang ditutup dalam kurungan kerinting {}. Setiap nama diikuti dengan titik dua : dan pasangan dipisahkan dengan koma ,.
   {"name": "John", "age": 30, "city": "New York"}
   
  1. Array: Senarai teratur nilai yang ditutup dalam kurungan siku []. Nilai dipisahkan dengan koma ,.
   ["apple", "banana", "cherry"]
   

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:

  1. Memapar: Rentetan JSON pertama kali dipapar untuk memastikan ia sah dan untuk membuat representasi dalam memori bagi struktur data.

  2. Indentasi: Setiap tahap bersarang objek dan array diindentasikan (biasanya dengan 2 atau 4 ruang) untuk mewakili hierarki secara visual.

  3. Pemisahan Baris: Barisan baru ditambah selepas setiap harta atau elemen array untuk meningkatkan kebolehbaca.

  4. Ruang: Ruang yang konsisten ditambah di sekitar titik dua dan koma.

Sebagai contoh, JSON yang diminified ini:

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

Menjadi JSON yang diformat ini:

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

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:

  1. Kesalahan Sintaks:

    • Nama harta yang tidak dipetik
    • Koma yang hilang atau berlebihan
    • Struktur yang tidak sepadan
    • Rentetan, objek, atau array yang tidak ditutup
  2. 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:

// Pengformatan JSON JavaScript
const formatted = JSON.stringify(jsonObject, null, 2);
# Pengformatan JSON Python
import json
formatted = json.dumps(json_object, indent=2)
// Pengformatan JSON Java dengan Gson
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String formatted = gson.toJson(jsonObject);
# Pengformatan JSON Ruby
require 'json'
formatted = JSON.pretty_generate(json_object)
// Pengformatan JSON PHP
$formatted = json_encode($jsonObject, JSON_PRETTY_PRINT);

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:

// Pengformatan JSON JavaScript
function formatJSON(jsonString) {
  try {
    const parsedData = JSON.parse(jsonString);
    return JSON.stringify(parsedData, null, 2);
  } catch (error) {
    return `Error: ${error.message}`;
  }
}

// Contoh penggunaan
const rawJSON = '{"name":"John","age":30,"city":"New York"}';
console.log(formatJSON(rawJSON));
# Pengformatan JSON Python
import json

def format_json(json_string):
    try:
        parsed_data = json.loads(json_string)
        return json.dumps(parsed_data, indent=2)
    except json.JSONDecodeError as e:
        return f"Error: {str(e)}"

# Contoh penggunaan
raw_json = '{"name":"John","age":30,"city":"New York"}'
print(format_json(raw_json))
// Pengformatan JSON Java dengan Gson
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonSyntaxException;

public class JSONFormatter {
    public static String formatJSON(String jsonString) {
        try {
            Gson gson = new GsonBuilder().setPrettyPrinting().create();
            Object parsedJson = gson.fromJson(jsonString, Object.class);
            return gson.toJson(parsedJson);
        } catch (JsonSyntaxException e) {
            return "Error: " + e.getMessage();
        }
    }
    
    public static void main(String[] args) {
        String rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
        System.out.println(formatJSON(rawJSON));
    }
}
// Pengformatan JSON PHP
function formatJSON($jsonString) {
    $result = json_decode($jsonString);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return "Error: " . json_last_error_msg();
    }
    return json_encode($result, JSON_PRETTY_PRINT);
}

// Contoh penggunaan
$rawJSON = '{"name":"John","age":30,"city":"New York"}';
echo formatJSON($rawJSON);
# Pengformatan JSON Ruby
require 'json'

def format_json(json_string)
  begin
    parsed_data = JSON.parse(json_string)
    return JSON.pretty_generate(parsed_data)
  rescue JSON::ParserError => e
    return "Error: #{e.message}"
  end
end

# Contoh penggunaan
raw_json = '{"name":"John","age":30,"city":"New York"}'
puts format_json(raw_json)
// Pengformatan JSON C# dengan Newtonsoft.Json
using Newtonsoft.Json;
using System;

class JSONFormatter
{
    public static string FormatJSON(string jsonString)
    {
        try
        {
            object parsedJson = JsonConvert.DeserializeObject(jsonString);
            return JsonConvert.SerializeObject(parsedJson, Formatting.Indented);
        }
        catch (JsonException e)
        {
            return $"Error: {e.Message}";
        }
    }
    
    static void Main()
    {
        string rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
        Console.WriteLine(FormatJSON(rawJSON));
    }
}
// Pengformatan JSON Go
package main

import (
    "encoding/json"
    "fmt"
)

func formatJSON(jsonString string) string {
    var parsedData interface{}
    err := json.Unmarshal([]byte(jsonString), &parsedData)
    if err != nil {
        return fmt.Sprintf("Error: %s", err.Error())
    }
    
    formattedBytes, err := json.MarshalIndent(parsedData, "", "  ")
    if err != nil {
        return fmt.Sprintf("Error: %s", err.Error())
    }
    
    return string(formattedBytes)
}

func main() {
    rawJSON := `{"name":"John","age":30,"city":"New York"}`
    fmt.Println(formatJSON(rawJSON))
}

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

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