JSON Formázó

Mi az a JSON formázás?

A JSON formázás során a JSON adatokat egységes, ember által könnyen olvasható formára alakítjuk át, behúzások, szóközök és sortörések hozzáadásával – anélkül, hogy az adat struktúráját vagy tartalmát megváltoztatnánk. A helyes formázás megkönnyíti a JSON ellenőrzését, hibakeresését, megosztását és szerkesztését, miközben kompatibilis marad a gépekkel és szoftveres eszközökkel.

A JSON definíció szerint eltekint a szóközöktől (whitespace) a string értékeken kívül. Azonban a rosszul formázott (vagy minimalizált) JSON – amely nincs behúzva, vagy egy sorba van sűrítve – ember számára szinte olvashatatlan vagy megbízhatatlanul módosítható.

JSON formázás vs. minimalizálás

• A formázás szóközöket, behúzásokat és sortöréseket ad hozzá az átláthatóság és olvashatóság érdekében.
• A minimalizálás eltávolít minden fölösleges szóközt a maximális tömörítés és hatékonyság érdekében tárolásra vagy átvitelre.
• Egy hatékony JSON formázó lehetővé teszi ezen módok közötti váltást, így könnyedén kapcsolhatsz emberbarát és gépoptimalizált változatok között igény szerint.

Példa: Minimalizált vs. Formázott 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
}

Miért érdemes JSON-t formázni?

• Olvashatóság: A megfelelő behúzás és sortörések megkönnyítik a belső objektumok áttekintését, a hibák gyors felismerését és a bonyolult adatstruktúrák gyors megértését.
• Hibakeresés: Az érvénytelen vagy váratlan adatok kezelése egyszerűbb, amikor vizuálisan gyorsan átnézheted kulcsokat, értékeket és a beágyazási szinteket.
• Együttműködés: A jól formázott JSON könnyebb átnézni, megvitatni és szerkeszteni kódellenőrzéseknél, dokumentációban vagy megosztott fájlokban.
• Verziókezelés: A Git és más VCS eszközök értelmesebb eltéréseket mutatnak formázott JSON esetén, így az időbeli változások követése egyszerűbb.
• Megfelelőség: Számos kódstílus útmutató és automatikus linter (pl. Prettier, ESLint vagy jq) következetes formázást ír elő az átláthatóság és egységesség érdekében.
• Eszközkompatibilitás: Egyes API-k, parancssori eszközök és szerkesztők formázott bemenetet várnak az emberi használat vagy naplózás megkönnyítésére.

Hogyan működik egy JSON formázó?

1. Elemzés (parsing): A formázó először megpróbálja feldolgozni a bemenetet egy szigorú JSON értelmezővel. Ez a lépés ellenőrzi a szintaxis helyességét – például hiányzó idézőjeleket, fölösleges vesszőket vagy nem escape-elt karaktereket keresve.
2. Szépítés: Amint a bemenet érvényes, az adatot egy felhasználó által megadott behúzással (általában 2 vagy 4 szóköz) és sortörésekkel visszaalakítja szép, jól olvasható JSON szöveggé.

Ha a bemenet nem érvényes JSON, a formázó hibát jelez, vagy segítő üzenetet ad meg a probléma helyével és típusával.

Formázási beállítások

• Behúzás: Állítsd be a behúzás szintjét szóközökben (maximum 8).
• Az objektum kulcsainak ábécé szerinti rendezése
• Használj tabulátort a behúzáshoz szóközök helyett
• Nem ASCII karakterek Unicode escape-elése
• Kimenet minimalizálása (egysoros, szóköz nélkül)

Gyakori problémák amiket a formázás megold

• Egysoros/minimalizált JSON: Az API-k vagy naplófájlok általában tömörítve adnak vissza adatot a sávszélesség optimalizálására, ami megnehezíti a kézi szerkesztést. A formázás visszaállítja az olvashatóságot áttekintéshez és szerkesztéshez.
• Inkonzisztens behúzás: Különböző forrásokból beillesztett JSON változó tabulátorokat, szóközöket vagy behúzási mélységet tartalmazhat. A formázás normalizálja ezeket, javítva a tisztaságot és következetességet.
• Nagy/beágyazott struktúrák: Mélyen egymásba ágyazott tömbök vagy objektumok (pl. konfigurációs fájlok vagy összetett API válaszok) kezelhetővé és átláthatóvá válnak formázva, összehajtható nézetekkel a támogatott szerkesztőkben.

Valós példa: API válaszok formázása

Harmadik féltől származó API-k (pl. AWS, Stripe, Google Cloud) válaszai gyakran tömörítve érkeznek a sebesség érdekében. Ezek formázása megkönnyíti a hiányzó mezők ellenőrzését, a váratlan értékek hibakeresését vagy a csapattársakkal való megosztást.

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

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

Hogyan formázz JSON-t ezzel az eszközzel

1. Illeszd be vagy töltsd fel a nyers, minimalizált vagy rosszul formázott JSON-t a bemeneti mezőbe.
2. Válaszd ki a formázási beállításokat (behúzás mérete, kulcsok rendezése stb.).
3. Kattints a "Formázás" gombra a feldolgozáshoz.
4. Tekintsd meg vagy másold ki a tiszta, olvasható eredményt. Ha hibák vannak, részletes szintaxis üzenetek segítenek javítani a JSON-t.

Minden formázás biztonságosan, a böngésződben történik – az adataid soha nem hagyják el az eszközödet.

Kód példák JSON formázáshoz

Nézze meg, hogyan formázhatja a JSON-t különböző programozási nyelveken. Ezek a példák alapvető formázási technikákat mutatnak be.

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