JSON Formatter

Ano ang JSON Formatting?

Ang JSON formatting ay ang proseso ng pag-transform ng JSON data upang maging consistent at madaling basahin ng tao sa pamamagitan ng pagdagdag ng indentation, whitespace, at line breaks—nang hindi binabago ang istruktura o nilalaman. Ginagawa nitong mas madali ang pag-inspect, debug, pagbahagi, at pag-edit ng JSON, habang panatililing compatible sa mga makina at software tools.

Ayon sa kahulugan, hindi pinapansin ng JSON ang whitespace sa labas ng mga string values. Ngunit ang hindi maayos ang dating (o minified) JSON—na walang indentation o nakasiksik sa isang linya—ay halos imposible basahin o baguhin nang maayos ng tao.

Pag-format vs. Pag-minify ng JSON

• Nagdaragdag ang formatting ng whitespace, indentation, at line breaks para sa kalinawan at madaling basahin.
• Inaalis ng minifying ang lahat ng hindi kailangang whitespace para sa pinakamalayang compactness at episyensya sa imbakan o pagpapadala.
• Pinapahintulutan ng isang matibay na JSON formatter ang paglipat sa pagitan ng mga mode na ito, kaya madali kang makakapag-toggle mula sa user-friendly hanggang sa machine-optimized na bersyon kung kinakailangan.

Halimbawa: Minified laban sa Formatted JSON

{"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
}

Bakit Mag-format ng JSON?

• Basaang Madali: Ang wastong indentation at line breaks ay nagpapadali sa pag-inspect ng mga nested na bagay, pagtukoy ng mga mali, at pag-unawa sa komplikadong data nang mabilis.
• Pag-debug: Mas madali ang pagsiyasat ng mga invalid o hindi inaasahang data kapag nakikita mo nang malinaw at sinusundan ang mga susi, halaga, at antas ng nesting.
• Pakikipagtulungan: Ang maayos na format na JSON ay madaling repasuhin, talakayin, at i-edit sa mga code review, dokumentasyon, o pinagsamang mga file.
• Version Control: Gumagawa ang Git at iba pang mga VCS ng mas malinaw na mga diff kapag naka-format ang JSON, kaya mas madaling subaybayan ang mga pagbabago.
• Pagsunod: Maraming style guide at automated linters (gaya ng Prettier, ESLint, o jq) ang nagpipilit ng pare-parehong format para sa kalinawan at standardisasyon.
• Kompatibilidad sa Tool: May ilang API, CLI, at editor na inaasahan ang pormatadong input para sa mas madaling pakikipag-interact ng tao o pag-log.

Paano Gumagana ang JSON Formatter?

1. Parsing: Sinusubukan muna ng formatter na i-parse ang input mo gamit ang mahigpit na JSON parser. Sinusuri nito ang tamang syntax—kinukuha ang mga isyu tulad ng nawawalang quotes, trailing commas, o hindi na-escape na karakter.
2. Pretty-Printing: Kapag valid na, pinapa-serialize ulit ang data sa string na may tinakdang indentation (karaniwan ay 2 o 4 spaces) at line breaks para gumawa ng "pretty-printed" na bersyon.

Kung hindi valid ang input na JSON, magbibigay ang formatter ng error o mensaheng tumutukoy sa lokasyon at dahilan ng problema.

Mga Opsyon sa Pag-format

• Indentation: Itakda ang bilang ng spaces bawat antas (hanggang 8).
• Ayusin ang mga keys alphabetically
• Gamitin ang tabs sa indentation sa halip na spaces
• I-escape ang mga non-ASCII characters bilang Unicode
• I-minify ang output (iisang linya, walang spaces)

Mga Karaniwang Isyu na Nasosolusyunan ng Formatting

• Single-line/Minified JSON: Madalas minified ang data mula sa mga API o log file para makatipid sa bandwidth, na nagpapahirap sa manual na pag-edit. Inaayos ng formatting ang readability para sa review at pag-edit.
• Hindi Parehong Indentation: Ang JSON mula sa iba't ibang pinagkuhanan ay maaaring may halo-halong tabs, spaces, o di-parehong lalim ng indentation. Pinapantay ng pagreformat ang pagkakaiba-iba para sa mas malinaw at consistent na hitsura.
• Malaki/Naka-nested na Istruktura: Ang malalalim na nested arrays o objects (tulad ng mga configuration file o komplikadong API responses) ay nagiging madali nang i-navigate kapag na-format, may mga collapsible na view sa mga suportadong editor.

Tunay na Halimbawa: Pag-format ng API Responses

Kapag nakikipag-integrate sa third-party API (tulad ng AWS, Stripe, o Google Cloud), madalas compact ang mga response para sa bilis. Ginagawang madali ng pag-format ng JSON ang pag-inspect kung may kulang na field, pag-debug ng mga hindi inaasahang value, o pagbabahagi sa mga katrabaho.

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

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

Paano Mag-format ng JSON Gamit ang Tool na Ito

1. I-paste o i-upload ang raw, minified, o hindi maayos na formatted JSON sa input area.
2. Piliin ang mga opsyon sa pag-format (laki ng indentation, ayusin ang keys, atbp.).
3. I-click ang "I-format" para iproseso ang input mo.
4. Tingnan o kopyahin ang malinis at madaling basahing output. Kung may nakitang error, lalabas ang detalyadong syntax message para matulungan kang ayusin ang JSON.

Lahat ng pag-format ay ligtas na ginagawa sa loob ng iyong browser—hindi nanggagaling sa device mo ang data.

Mga Halimbawa ng Code para sa Pag-format ng JSON

Tingnan kung paano i-format ang JSON sa iba't ibang programming na wika. Ipinapakita ng mga halimbawa na ito ang mga pangunahing teknik sa pag-format.

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