JSON-muotoilija

Mitä on JSON-muotoilu?

JSON-muotoilu tarkoittaa JSON-datan muuntamista yhtenäiseen, ihmisystävälliseen muotoon lisäämällä sisennykset, välilyönnit ja rivinvaihdot muuttamatta sen rakennetta tai sisältöä. Oikea muotoilu tekee JSONista helpommin tarkasteltavaa, virheiden etsittävää, jaettavaa ja muokattavaa, säilyttäen yhteensopivuuden koneiden ja ohjelmistojen kanssa.

JSON ohittaa määritelmänsä mukaisesti välilyönnit merkkijonojen ulkopuolella. Huonosti muotoiltu (tai minimointi) JSON, jossa ei ole sisennyksiä tai joka on yhteen riviin tiivistetty, on lähes lukukelvotonta ja vaikeasti muokattavaa ihmisille.

JSONin muotoilu vs. minimointi

• Muotoilu lisää välilyöntejä, sisennyksiä ja rivinvaihtoja selkeyden ja luettavuuden parantamiseksi.
• Minimointi poistaa kaiken turhan välilyönnin maksimaalisen tiiviyden ja tehokkuuden saavuttamiseksi tallennuksessa tai siirrossa.
• Monipuolinen JSON-muotoilija antaa vaihtaa näiden tilojen välillä helposti, jolloin voit valita ihmisystävällisen tai koneoptimoidun version tarpeen mukaan.

Esimerkki: Minimointi vs. muotoilu JSONissa

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

Miksi muotoilla JSON?

• Lukukelpoisuus: Oikeat sisennykset ja rivinvaihdot helpottavat upotettujen objektien tarkastelua, virheiden löytämistä ja monimutkaisten tietorakenteiden ymmärtämistä nopeasti.
• Virheiden etsiminen: Virheellisen tai odottamattoman datan vianmääritys on helpompaa, kun avaimet, arvot ja hierarkiat näkyvät selkeästi.
• Yhteistyö: Hyvin muotoiltua JSONia on helpompi tarkastella, keskustella ja muokata koodikatselmuksissa, dokumentaatiossa tai jaetuissa tiedostoissa.
• Versiohallinta: Git ja muut VCS-työkalut tuottavat merkityksellisempiä eroja muotoiltua JSONia käytettäessä, parantaen muutosten seuraamista.
• Yhteensopivuus: Monet tyyliohjeet ja automaattiset linters (kuten Prettier, ESLint tai jq) vaativat yhtenäistä muotoilua selkeyden ja standardoinnin takaamiseksi.
• Työkaluyhteensopivuus: Jotkut API:t, komentorivityökalut ja editorit edellyttävät muotoiltua syötettä helpomman ihmiskäytön tai lokituksen vuoksi.

Miten JSON-muotoilija toimii?

1. Jäsentäminen: Muotoilija yrittää ensin jäsentää syötteen tarkalla JSON-jäsennysmekanismilla. Tämä vaihe tarkistaa syntaksin oikeellisuuden–löytää esimerkiksi puuttuvat lainausmerkit, jäljessä olevat pilkut tai väärin käsitellyt merkit.
2. Kauniskirjoitus: Kun data on kelvollista, se sarjallistetaan uudelleen käyttäjän määrittelemällä sisennyksellä (yleensä 2 tai 4 välilyöntiä) ja rivinvaihdoilla, luoden "kauniin" esityksen.

Jos syöte ei ole kelvollista JSONia, muotoilija antaa virheilmoituksen tai apuviestin ongelman sijainnista ja luonteesta.

Muotoiluvalinnat

• Sisennys: Määritä välilyöntien määrä tasoa kohden (enintään 8).
• Järjestä objektien avaimet aakkosjärjestykseen
• Käytä sarkaimia sisennyksessä välilyöntien sijaan
• Päästä eroon ei-ASCII-merkeistä Unicode-merkintänä
• Minimoi tuloste (yhteen riviin ilman välilyöntejä)

Yleisiä ongelmia, jotka muotoilu ratkaisee

• Yhden rivin/minimoitu JSON: API-vastaukset tai lokitiedostot ovat usein minimoitu kaistanleveyden säästämiseksi, mikä vaikeuttaa manuaalista muokkausta. Muotoilu palauttaa luettavuuden tarkistusta ja muokkausta varten.
• Epäjohdonmukainen sisennys: Eri lähteistä liitetty JSON voi sisältää sekaisin sarkaimia, välilyöntejä tai vaihtelevaa sisennyksen syvyyttä. Uudelleenmuotoilu vakioi nämä erot, parantaen selkeyttä ja yhdenmukaisuutta.
• Suurikokoiset/syvästi sisäkkäiset rakenteet: Syvästi upotetut taulukot tai objektit (kuten konfiguraatiotiedostot tai monimutkaiset API-vastaukset) on helppoa hallita muotoiltuina, joidenkin editorien tuki mukaan lukien laajennettavat näkymät.

Käytännön esimerkki: API-vastausten muotoilu

Kun käytät kolmansien osapuolten API:eja (kuten AWS, Stripe tai Google Cloud), vastaukset ovat usein kompressoituja nopeuden vuoksi. JSONin muotoilu helpottaa puuttuvien kenttien tarkistamista, odottamattomien arvojen vianmääritystä ja jakamista tiimin kanssa.

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

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

Miten muotoilla JSON tällä työkalulla

1. Liitä tai lataa raakaa, minimoitua tai huonosti muotoiltua JSONia syöttökenttään.
2. Valitse muotoiluvalinnat (sisennyksen koko, avainten lajittelu jne.).
3. Paina "Muotoile" käsittelyä varten.
4. Katso tai kopioi puhdas, luettava tuloste. Jos virheitä löytyy, näkyviin tulee yksityiskohtaiset syntaksiviestit, jotka auttavat korjaamaan JSONin.

Kaikki muotoilu tapahtuu turvallisesti selaimessasi – tietosi eivät koskaan poistu laitteestasi.

JSON-muotoilun koodiesimerkit

Katso, miten JSON-tiedot muotoillaan eri ohjelmointikielissä. Nämä esimerkit havainnollistavat perusmuotoilutekniikoita.

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