JSON Formatter

Wat is JSON Formattering?

JSON formattering is het proces waarbij JSON-data wordt omgezet in een consistente, leesbare weergave door inspringing, witruimtes en regelscheidingen toe te voegen—zonder de structuur of inhoud te wijzigen. Goede formattering maakt JSON makkelijker te inspecteren, debuggen, delen en bewerken, terwijl het nog steeds compatibel blijft met machines en software tools.

JSON negeert standaard witruimte buiten stringwaarden. Slecht geformatteerde (of geminimaliseerde) JSON—zonder inspringing of samengevoegd op één regel—kan bijna onmogelijk menselijk leesbaar of betrouwbaar bewerkbaar zijn.

Formatteren versus Minimaliseren van JSON

• Formatteren voegt witruimte, inspringing en regelscheidingen toe voor duidelijkheid en leesbaarheid.
• Minimaliseren verwijdert alle onnodige witruimte voor maximale compactheid en efficiënte opslag of overdracht.
• Een goede JSON formatter laat je eenvoudig schakelen tussen deze modi, zodat je snel kunt wisselen tussen mensvriendelijke en machine-geoptimaliseerde versies.

Voorbeeld: Geminimaliseerde vs. Geformatteerde 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
}

Waarom JSON Formatteren?

• Leesbaarheid: Juiste inspringingen en regelscheidingen maken het makkelijker om geneste objecten te inspecteren, fouten te spotten en complexe datastructuren in een oogopslag te begrijpen.
• Debuggen: Het oplossen van problemen met ongeldige of onverwachte data wordt eenvoudiger als je visueel sleutels, waarden en niveaus kunt scannen en traceren.
• Samenwerking: Goed geformatteerde JSON is makkelijker te beoordelen, bespreken en bewerken tijdens code reviews, documentatie of gedeelde bestanden.
• Versiebeheer: Git en andere VCS tools genereren duidelijkere verschillen bij geformatteerde JSON, wat het opvolgen van wijzigingen in de tijd vereenvoudigt.
• Compliantie: Veel stijlgidsen en automatische linters (zoals Prettier, ESLint of jq) handhaven consistente formattering voor helderheid en standaardisatie.
• Toolcompatibiliteit: Sommige API's, CLI's en editors verwachten geformatteerde invoer voor eenvoudigere menselijke interactie of logging.

Hoe Werkt een JSON Formatter?

1. Parsing: De formatter probeert eerst je invoertekst te parsen met een strikte JSON-parser. Deze stap controleert syntaxisvaliditeit—zoals ontbrekende aanhalingstekens, afsluitende komma's of niet-geëscapte tekens.
2. Mooi printen: Is de JSON geldig? Dan wordt deze omgezet naar een string met ingestelde inspringing (meestal 2 of 4 spaties) en regelscheidingen, voor een mooi geprinte versie.

Is de invoer geen geldige JSON? Dan geeft de formatter een foutmelding met details over de locatie en aard van het probleem.

Formatteringsopties

• Inspringing: Stel het aantal spaties per niveau in (tot 8).
• Sorteer object-sleutels alfabetisch
• Gebruik tabs voor inspringing in plaats van spaties
• Escapeer niet-ASCII tekens als Unicode
• Minimaliseer output (één regel, geen spaties)

Veelvoorkomende Problemen Opgelost Door Formattering

• Eén-regel/Miniamalisatie JSON: Data van API's of logbestanden is vaak geminimaliseerd voor bandbreedtebesparing, wat handmatig bewerken bemoeilijkt. Formattering herstelt leesbaarheid voor beoordeling en bewerking.
• Inconsistente inspringing: JSON van diverse bronnen kan verschillende tabs, spaties of wisselende inspringdieptes bevatten. Opnieuw formatteren normaliseert dit en verbetert de duidelijkheid en samenhang.
• Grote/Geneste Structuren: Diep geneste arrays of objecten (zoals configuratiebestanden of complexe API-responses) worden overzichtelijk en eenvoudig navigeerbaar door formattering, inclusief inklapbare weergave in ondersteunde editors.

Praktijkvoorbeeld: Formatteren van API-Responses

Bij integratie met externe API's (zoals AWS, Stripe of Google Cloud) zijn responses vaak compact gemaakt voor snelheid. JSON formatteren maakt het eenvoudiger om ontbrekende velden te controleren, onverwachte waarden te debuggen of te delen met collega's.

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

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

Hoe Gebruik je Deze JSON Formatter

1. Plak of upload je ruwe, geminimaliseerde of slecht geformatteerde JSON in het invoerveld.
2. Kies je formatteringsopties (inspringing, sorteren van sleutels, etc.).
3. Klik op "Formatteren" om je invoer te verwerken.
4. Bekijk of kopieer de nette, leesbare output. Bij fouten verschijnen gedetailleerde syntaxmeldingen om je te helpen de JSON te corrigeren.

Alle formatteringen worden veilig in je browser uitgevoerd—je data verlaat nooit je apparaat.

Codevoorbeelden voor JSON-opmaak

Bekijk hoe je JSON formateert in verschillende programmeertalen. Deze voorbeelden laten basisformatteringstechnieken zien.

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