JSON Formatter JavaScript β JSON.stringify()
Gebruik de gratis JSON Formatter & Beautifier direct in je browser β geen installatie nodig.
JSON Formatter & Beautifier online uitproberen βAls ik API-responses debug in Node.js, is een muur van minified JSON het eerste wat me vertraagt β één aanroep naar JSON.stringify(data, null, 2) en de structuur wordt direct leesbaar. Om JSON op te maken in JavaScript heb je niets buiten de runtime nodig: JSON.stringify zit ingebakken in elke browser en Node.js-omgeving, zonder installatie. Als je alleen een snel resultaat nodig hebt zonder code te schrijven, doet de JSON Formatter van ToolDeck dit direct. Deze gids behandelt alles wat praktisch is: de space-parameter, replacer-arrays en -functies, het verwerken van Date, BigInt en circulaire referenties, JSON-bestanden lezen en schrijven in Node.js (18+), CLI pretty-printing, en de fast-json-stringify bibliotheek voor productieserialisatie.
- βJSON.stringify(data, null, 2) zit ingebakken in elke browser en Node.js β geen installatie vereist.
- βDe replacer-parameter accepteert een array (whitelist van sleutels) of een functie (waarden transformeren) β gebruik het om gevoelige velden te maskeren.
- βDate-objecten worden automatisch geserialiseerd via toJSON() β ISO 8601-string; BigInt gooit TypeError en vereist een aangepaste replacer.
- βCirculaire referenties gooien TypeError β los op met een seen Set in een replacer-functie, of gebruik de flatted-bibliotheek.
- βGebruik voor CLI pretty-printing node -p "JSON.stringify(require('./file.json'),null,2)" β geen extra tools nodig.
Wat is JSON-opmaak?
JSON-opmaak (ook wel pretty-printing genoemd) transformeert een compacte, geminificeerde JSON-string naar een voor mensen leesbare indeling met consistente inspringing en regelafbrekingen. De onderliggende data is identiek β alleen de witruimte verandert. Compacte JSON is optimaal voor netwerkoverdracht waarbij elke byte telt; opgemaakte JSON is optimaal voor debuggen, codereview en loginspectie. JavaScript's JSON.stringify() verwerkt beide in één aanroep door de space-parameter te wisselen.
{"orderId":"ord_8f2a91bc","status":"shipped","items":[{"sku":"HDMI-4K-2M","qty":2,"unitPrice":12.99}],"total":25.98}{
"orderId": "ord_8f2a91bc",
"status": "shipped",
"items": [
{
"sku": "HDMI-4K-2M",
"qty": 2,
"unitPrice": 12.99
}
],
"total": 25.98
}JSON.stringify() β De ingebouwde formatter
JSON.stringify() is een globale functie in elke JavaScript-omgeving β browsers, Node.js, Deno, Bun β zonder import nodig. Het derde argument, space, bepaalt de inspringing: geef een getal mee voor dat aantal spaties per niveau, of de string '\t' voor tabs. Laat het weg (of geef null mee) en u krijgt compacte uitvoer op één regel.
const serverConfig = {
host: "api.payments.internal",
port: 8443,
workers: 4,
tls: { enabled: true, cert: "/etc/ssl/certs/api.pem" },
rateLimit: { requestsPerMinute: 1000, burst: 50 }
}
console.log(JSON.stringify(serverConfig, null, 2))
// {
// "host": "api.payments.internal",
// "port": 8443,
// "workers": 4,
// "tls": {
// "enabled": true,
// "cert": "/etc/ssl/certs/api.pem"
// },
// "rateLimit": {
// "requestsPerMinute": 1000,
// "burst": 50
// }
// }De space-parameter accepteert een getal (1β10 spaties) of een string. Een tab-teken meegeven levert uitvoer op die veel editors en diff-tools prefereren. U kunt ook alle drie de parameters combineren β hier is een praktijkpatroon dat ik gebruik bij het schrijven van opgemaakte JSON naar configuratiebestanden:
const telemetryEvent = {
eventId: "evt_3c7f9a2b",
service: "checkout-api",
severity: "warn",
latencyMs: 342,
region: "eu-west-1",
tags: ["payment", "timeout", "retry"]
}
// 2-spaties inspringing (meest gangbaar in JS-projecten)
JSON.stringify(telemetryEvent, null, 2)
// Tab-inspringing (voorkeur van sommige linters en configuratietools)
JSON.stringify(telemetryEvent, null, '\t')
// Compact β geen witruimte (voor netwerkoverdracht)
JSON.stringify(telemetryEvent)
// {"eventId":"evt_3c7f9a2b","service":"checkout-api",...}undefined, functies en Symbol worden stilzwijgend weggelaten uit de uitvoer. Als een eigenschapswaarde undefined is, verschijnt die sleutel helemaal niet in de geserialiseerde string β een veelvoorkomende bron van bugs bij het loggen van objecten met optionele velden.Replacer-functies β Uitvoer filteren en transformeren
Het tweede argument van JSON.stringify() is de replacer. Die bestaat in twee vormen: een array die specifieke sleutels op de whitelist zet, of een functie die voor elk sleutel/waarde-paar wordt aangeroepen en waarden kan filteren, transformeren of redigeren. Ik grijp naar de arrayvorm als ik een snelle deelverzameling nodig heb, en naar de functievorm als ik gevoelige data wil maskeren vΓ³Γ³r het loggen.
Array-replacer β Specifieke sleutels op whitelist zetten
const order = {
orderId: "ord_8f2a91bc",
customer: {
id: "usr_4421",
email: "j.devries@voorbeeld.nl",
passwordHash: "bcrypt:$2b$12$XKzV..."
},
items: [{ sku: "HDMI-4K-2M", qty: 2, unitPrice: 12.99 }],
createdAt: "2026-03-10T14:22:00Z"
}
// Neem alleen veilige velden op in de loguitvoer
const safeLog = JSON.stringify(order, ["orderId", "items", "createdAt"], 2)
// {
// "orderId": "ord_8f2a91bc",
// "items": [{ "sku": "HDMI-4K-2M", "qty": 2, "unitPrice": 12.99 }],
// "createdAt": "2026-03-10T14:22:00Z"
// }
// passwordHash en customer.email zijn uitgeslotenFunctie-replacer β Waarden transformeren
const auditRecord = {
requestId: "req_7d2e91",
user: { id: "usr_4421", email: "j.devries@voorbeeld.nl", apiKey: "sk-live-eKx9..." },
action: "update_billing",
timestamp: new Date("2026-03-10T14:22:00Z"),
durationMs: 87
}
function safeReplacer(key, value) {
// Redigeer velden die op geheimen of persoonlijke gegevens lijken
if (key === "apiKey") return "[REDACTED]"
if (key === "email") return value.replace(/(?<=.{2}).+(?=@)/, "***")
return value
}
console.log(JSON.stringify(auditRecord, safeReplacer, 2))
// {
// "requestId": "req_7d2e91",
// "user": { "id": "usr_4421", "email": "j.***@voorbeeld.nl", "apiKey": "[REDACTED]" },
// "action": "update_billing",
// "timestamp": "2026-03-10T14:22:00.000Z",
// "durationMs": 87
// }this ingesteld op het object dat de huidige sleutel bevat. De allereerste aanroep geeft een lege string als sleutel en de gehele te serialiseren waarde als waarde door β geef die ongewijzigd terug om door te gaan met normale serialisatie.Niet-serialiseerbare typen verwerken
Niet alle JavaScript-waarden komen schoon overeen met JSON. Weten hoe elk type zich gedraagt voorkomt stille gegevensverlies en onverwachte runtimefouten in productiecode.
Date β Automatisch via toJSON()
Date-objecten implementeren een toJSON()-methode die een ISO 8601-string teruggeeft. JSON.stringify() roept toJSON() automatisch aan vΓ³Γ³r serialisatie, dus geen aangepaste verwerking nodig.
const webhook = {
eventType: "payment.succeeded",
occurredAt: new Date("2026-03-10T14:22:00Z"),
processedAt: new Date()
}
JSON.stringify(webhook, null, 2)
// {
// "eventType": "payment.succeeded",
// "occurredAt": "2026-03-10T14:22:00.000Z",
// "processedAt": "2026-03-10T14:22:01.347Z"
// }
// Elk object met een toJSON()-methode krijgt dezelfde behandeling:
const custom = { toJSON: () => "custom-value", hidden: 42 }
JSON.stringify(custom) // '"custom-value"'Aangepaste klassen β toJSON() implementeren
Elke klasse kan een toJSON()-methode implementeren en JSON.stringify() roept die automatisch aan tijdens serialisatie. Dit is schoner dan een globale replacer voor domeintypen die door uw hele codebase terugkomen.
class Money {
constructor(amount, currency) {
this.amount = amount
this.currency = currency
}
toJSON() {
// Automatisch aangeroepen door JSON.stringify
return { amount: this.amount, currency: this.currency, formatted: `${this.currency} ${this.amount.toFixed(2)}` }
}
}
class OrderId {
constructor(id) { this.id = id }
toJSON() { return this.id } // Serialiseer als gewone string
}
const invoice = {
invoiceId: new OrderId('inv_8f2a91bc'),
subtotal: new Money(199.00, 'EUR'),
tax: new Money(15.92, 'EUR'),
issuedAt: new Date('2026-03-10T14:22:00Z')
}
JSON.stringify(invoice, null, 2)
// {
// "invoiceId": "inv_8f2a91bc",
// "subtotal": { "amount": 199, "currency": "EUR", "formatted": "EUR 199.00" },
// "tax": { "amount": 15.92, "currency": "EUR", "formatted": "EUR 15.92" },
// "issuedAt": "2026-03-10T14:22:00.000Z"
// }toJSON() heeft prioriteit boven de replacer-functie. Als beide aanwezig zijn, wordt toJSON() eerst uitgevoerd β de replacer ontvangt de al geconverteerde waarde, niet de originele klasse-instantie.BigInt β TypeError zonder een replacer
// Dit gooit: TypeError: Do not know how to serialize a BigInt
// JSON.stringify({ sessionId: 9007199254741234n })
// Oplossing: converteer BigInt naar string in de replacer
function bigIntReplacer(_key, value) {
return typeof value === 'bigint' ? value.toString() : value
}
const metrics = {
requestCount: 9007199254741234n, // overschrijdt Number.MAX_SAFE_INTEGER
service: "ingestion-worker",
region: "eu-west-1"
}
JSON.stringify(metrics, bigIntReplacer, 2)
// {
// "requestCount": "9007199254741234",
// "service": "ingestion-worker",
// "region": "eu-west-1"
// }Circulaire referenties β TypeError zonder een seen Set
// Dit gooit: TypeError: Converting circular structure to JSON
// const node = { id: "n1" }; node.self = node; JSON.stringify(node)
// Oplossing: bijhouden van geziene objecten met een WeakSet
function circularReplacer() {
const seen = new WeakSet()
return function (_key, value) {
if (typeof value === 'object' && value !== null) {
if (seen.has(value)) return '[Circular]'
seen.add(value)
}
return value
}
}
const parent = { id: "node_parent", label: "root" }
const child = { id: "node_child", parent }
parent.child = child // circulair
JSON.stringify(parent, circularReplacer(), 2)
// {
// "id": "node_parent",
// "label": "root",
// "child": { "id": "node_child", "parent": "[Circular]" }
// }
// Als alternatief: npm install flatted
// import { stringify } from 'flatted'
// stringify(parent) // verwerkt circulaire refs nativeJSON.stringify() Parametersreferentie
Alle drie de parameters worden volledig ondersteund in elke moderne JavaScript-runtime. De standaardwaarden produceren compacte JSON op één regel β geef parameters expliciet mee voor leesbare uitvoer.
JSON opmaken uit een bestand en API-response
In Node.js (18+) moet u vaak een JSON-configuratiebestand herformatteren of een API-response mooi afdrukken voor debuggen. Beide patronen gebruiken dezelfde twee stappen: parseer de ruwe tekst met JSON.parse(), en serialiseer opnieuw met JSON.stringify().
Een JSON-configuratiebestand lezen en herschrijven
import { readFileSync, writeFileSync } from 'fs'
try {
const raw = readFileSync('./config/database.json', 'utf8')
const config = JSON.parse(raw)
writeFileSync('./config/database.json', JSON.stringify(config, null, 2))
console.log('Configuratie succesvol herformateerd')
} catch (err) {
console.error('Herformatteren van configuratie mislukt:', err.message)
// JSON.parse gooit SyntaxError als het bestand ongeldige JSON bevat
// readFileSync gooit ENOENT als het bestand niet bestaat
}Asynchroon bestand herformatteren (fs/promises)
import { readFile, writeFile } from 'fs/promises'
async function reformatJson(filePath) {
const raw = await readFile(filePath, 'utf8')
const parsed = JSON.parse(raw)
const formatted = JSON.stringify(parsed, null, 2)
await writeFile(filePath, formatted, 'utf8')
return { keys: Object.keys(parsed).length }
}
// Gebruik
const { keys } = await reformatJson('./config/feature-flags.json')
console.log(`${keys} sleutels op het hoogste niveau herformateerd`)JSON van een fetch()-response mooi afdrukken
Bij het bouwen of debuggen van een API-client in Node.js 18+ of de browser is het mooi afdrukken van de responsbody de snelste manier om te begrijpen wat de server heeft teruggegeven. Het standaardpatroon is response.json() (geparseerd object) doorgeven aan JSON.stringify(). Als u eerst de ruwe string nodig heeft β bijvoorbeeld om een hash te berekenen of verbatim te loggen β gebruik dan response.text() gevolgd door JSON.parse().
// Patroon 1: response.json() β mooi afdrukken
async function debugEndpoint(url) {
const res = await fetch(url, {
headers: { Authorization: `Bearer ${process.env.API_TOKEN}` }
})
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`)
const data = await res.json()
console.log(JSON.stringify(data, null, 2))
}
await debugEndpoint('https://api.stripe.com/v1/charges?limit=3')// Patroon 2: response.text() β parseren β opmaken
// Handig als u zowel de ruwe response als de mooie uitvoer wilt loggen
async function inspectRawResponse(url) {
const res = await fetch(url)
const raw = await res.text()
console.log('Lengte ruwe response:', raw.length)
try {
const parsed = JSON.parse(raw)
console.log('Opgemaakt:')
console.log(JSON.stringify(parsed, null, 2))
} catch {
console.error('Response is geen geldige JSON:', raw.slice(0, 200))
}
}Pretty-printing via de commandoregel
Node.js heeft genoeg mogelijkheden om JSON mooi af te drukken vanuit de terminal, zonder extra tools. Deze eenregelige opdrachten zijn handig in CI-scripts, deployment-pipelines en shell-aliassen. Installeer jq voor nog sneller interactief gebruik β de de-facto standaard voor JSON-manipulatie op de commandoregel.
# Druk package.json mooi af met node -p (print)
node -p "JSON.stringify(require('./package.json'), null, 2)"
# Mooi afdrukken vanuit stdin (pipe-vriendelijk, werkt in CI)
echo '{"port":3000,"env":"production"}' | node -e "
const d = require('fs').readFileSync(0, 'utf8')
console.log(JSON.stringify(JSON.parse(d), null, 2))
"
# Druk een API-response opgeslagen in een bestand mooi af
cat api-response.json | node -e "
process.stdin.setEncoding('utf8')
let s = ''
process.stdin.on('data', c => s += c)
process.stdin.on('end', () => console.log(JSON.stringify(JSON.parse(s), null, 2)))
"# Python-fallback (voorgeΓ―nstalleerd op macOS en de meeste Linux-distributies)
cat api-response.json | python3 -m json.tool
# jq β snelst en meest uitgebreid (brew install jq / apt install jq)
cat api-response.json | jq .
# jq β mooi afdrukken en filteren in één stap
cat api-response.json | jq '.data.users[] | {id, email}'"type": "module" in package.json) is require() niet beschikbaar in eenregelige opdrachten. Gebruik in dat geval --input-type=module met fs.readFileSync, of schakel over naar node -e met een CommonJS-fragment zoals hierboven.Als je helemaal niet in de terminal zit β een Postman-response of logbestand plakt β maakt de JSON Formatter van ToolDeck plakken, opmaken en kopiΓ«ren in één stap mogelijk met syntaxaccentuering en ingebouwde validatie.
Krachtig alternatief β fast-json-stringify
fast-json-stringify genereert een speciale serialisatiefunctie op basis van een JSON Schema. Omdat het de vorm van de data van tevoren kent, kan het typecontrole overslaan en stringconcatenatie gebruiken in plaats van recursieve afdaling β benchmarks laten doorgaans 2β5Γ hogere doorvoer zien dan JSON.stringify() op grote, repetitieve payloads. Ik gebruik het in API-routes met hoge frequentie waar serialisatiekosten zichtbaar zijn in profileringstracering.
npm install fast-json-stringify
import fastJson from 'fast-json-stringify'
const serializeTelemetryEvent = fastJson({
title: 'TelemetryEvent',
type: 'object',
properties: {
eventId: { type: 'string' },
service: { type: 'string' },
severity: { type: 'string', enum: ['info', 'warn', 'error'] },
latencyMs: { type: 'integer' },
timestamp: { type: 'string' },
region: { type: 'string' }
},
required: ['eventId', 'service', 'severity', 'latencyMs', 'timestamp']
})
const event = {
eventId: 'evt_3c7f9a2b',
service: 'checkout-api',
severity: 'warn',
latencyMs: 342,
timestamp: new Date().toISOString(),
region: 'eu-west-1'
}
const json = serializeTelemetryEvent(event)
// '{"eventId":"evt_3c7f9a2b","service":"checkout-api","severity":"warn",...}'fast-json-stringify is ontworpen voor productieserialisatie van gestructureerde data β het produceert altijd compacte uitvoer (geen pretty-printing). Gebruik tijdens ontwikkeling JSON.stringify(data, null, 2) zoals normaal voor voor mensen leesbare uitvoer.Terminaluitvoer met syntaxisaccentuering
Node.js' ingebouwde util.inspect() produceert gekleurde, voor mensen leesbare uitvoer die is geoptimaliseerd voor terminalweergave. Het verwerkt circulaire referenties en BigInt native en rendert geneste objecten tot elke diepte recursief. De uitvoer is geen geldige JSON β het gebruikt JavaScript-syntaxis (rendert functies en Symbols in plaats van ze weg te laten), wat het ideaal maakt voor Node.js-debugscripts maar ongeschikt voor API-responses of bestandsuitvoer.
import { inspect } from 'util'
const payload = {
requestId: "req_7d2e91",
user: { id: "usr_4421", roles: ["admin", "billing"] },
metadata: { ipAddress: "203.0.113.42", userAgent: "Mozilla/5.0" },
createdAt: new Date()
}
// depth: null β alle geneste niveaus uitvouwen; colors: true β ANSI-terminalkleur
console.log(inspect(payload, { colors: true, depth: null }))util.inspect() niet voor JSON die naar bestanden wordt geschreven, over het netwerk wordt verzonden of in een database wordt opgeslagen. De uitvoer is geen geldige JSON en zal parsefouten veroorzaken in elk downstream systeem dat JSON.parse() aanroept. Reserveer het voor interactief terminaldebugging.Werken met grote JSON-bestanden
JSON.parse() laadt het hele bestand in het geheugen vΓ³Γ³r het parseren β prima voor kleine payloads, maar onpraktisch voor bestanden boven 50β100 MB zoals database-exports, applicatielogdumps of analysebatches. Voor deze gevallen laten Node.js Streams en de stream-json-bibliotheek u records één voor één verwerken zonder de heap vol te gooien.
Streaming parseren met stream-json
npm install stream-json
import { pipeline } from 'stream/promises'
import { createReadStream } from 'fs'
import { parser } from 'stream-json'
import { streamArray } from 'stream-json/streamers/StreamArray.js'
// events.json = array van miljoenen objecten β nooit volledig in het geheugen geladen
await pipeline(
createReadStream('./events.json'),
parser(),
streamArray(),
async function* (source) {
for await (const { value: event } of source) {
if (event.severity === 'error') {
console.log(JSON.stringify(event, null, 2))
}
}
}
)NDJSON / JSON Lines β geen extra afhankelijkheden
NDJSON (Newline Delimited JSON) slaat één JSON-object per regel op en komt veel voor in Kafka-exports, BigQuery-uitvoer en gestructureerde logpipelines. Node.js' ingebouwde readline verwerkt dit zonder externe pakketten.
import { createReadStream } from 'fs'
import { createInterface } from 'readline'
// Formaat: één JSON-object per regel (logs, Kafka-exports, BigQuery)
const rl = createInterface({
input: createReadStream('./logs.ndjson'),
crlfDelay: Infinity
})
for await (const line of rl) {
if (!line.trim()) continue
const entry = JSON.parse(line)
if (entry.level === 'error') {
console.log(JSON.stringify(entry, null, 2))
}
}JSON.parse() naar streaming als uw JSON-bestand 50β100 MB overschrijdt of als u een onbegrensde stream verwerkt (Kafka, logpipeline). Gebruik voor NDJSON / JSON Lines readline β geen extra afhankelijkheden nodig.Veelgemaakte fouten
Deze vier fouten duiken steeds weer op in code reviews en productiebugrapportages. Elke fout betreft een subtiel gedrag van JSON.stringify() dat gemakkelijk over het hoofd wordt gezien en achteraf moeilijk te debuggen is.
Probleem: Objecteigenschappen met undefined-waarden worden volledig weggelaten uit de JSON-uitvoer β er is geen waarschuwing of fout. Dit veroorzaakt onzichtbaar gegevensverlies wanneer optionele velden bestaan op het object.
Oplossing: Gebruik null voor intentioneel afwezige waarden die in de geserialiseerde uitvoer moeten verschijnen. Reserveer undefined alleen voor velden die moeten worden uitgesloten van JSON.
const userProfile = {
userId: "usr_4421",
displayName: "Jan de Vries",
avatarUrl: undefined, // verdwijnt stilzwijgend
bio: undefined // verdwijnt stilzwijgend
}
JSON.stringify(userProfile, null, 2)
// { "userId": "usr_4421", "displayName": "Jan de Vries" }
// avatarUrl en bio zijn weg β geen waarschuwingconst userProfile = {
userId: "usr_4421",
displayName: "Jan de Vries",
avatarUrl: null, // expliciet afwezig β verschijnt in uitvoer
bio: null // expliciet afwezig β verschijnt in uitvoer
}
JSON.stringify(userProfile, null, 2)
// {
// "userId": "usr_4421",
// "displayName": "Jan de Vries",
// "avatarUrl": null,
// "bio": null
// }Probleem: Een BigInt-waarde doorgeven aan JSON.stringify() gooit een TypeError tijdens uitvoering. Dit is een harde crash, geen stilzwijgende weglating β het verschijnt in productie als een numeriek veld Number.MAX_SAFE_INTEGER overschrijdt.
Oplossing: Gebruik een replacer-functie die BigInt-waarden naar strings converteert vΓ³Γ³r serialisatie. Of converteer BigInt naar string of Number op de datalaag vΓ³Γ³r het doorgeven aan JSON.stringify.
const session = {
sessionId: 9007199254741234n, // BigInt-literaal
userId: "usr_4421",
startedAt: "2026-03-10T14:00:00Z"
}
JSON.stringify(session, null, 2)
// Uncaught TypeError: Do not know how to serialize a BigIntfunction bigIntReplacer(_key, value) {
return typeof value === 'bigint' ? value.toString() : value
}
const session = {
sessionId: 9007199254741234n,
userId: "usr_4421",
startedAt: "2026-03-10T14:00:00Z"
}
JSON.stringify(session, bigIntReplacer, 2)
// {
// "sessionId": "9007199254741234",
// "userId": "usr_4421",
// "startedAt": "2026-03-10T14:00:00Z"
// }Probleem: Objecten die naar zichzelf verwijzen β gebruikelijk in DOM-bomen, gelinkte lijsten en sommige ORM-resultaatsets β gooien een TypeError wanneer ze worden doorgegeven aan JSON.stringify(). De fout treedt alleen op bij serialisatie, vaak ver van waar de circulaire referentie is aangemaakt.
Oplossing: Gebruik een replacer-functie met een WeakSet om circulaire referenties te detecteren en te vervangen, of installeer de flatted-bibliotheek als drop-in vervanging die circulaire structuren native verwerkt.
const dept = { id: "dept_eng", name: "Engineering" }
const team = { id: "team_frontend", dept }
dept.teams = [team] // circulair: dept β team β dept
JSON.stringify(dept, null, 2)
// Uncaught TypeError: Converting circular structure to JSONimport { stringify } from 'flatted' // npm install flatted
const dept = { id: "dept_eng", name: "Engineering" }
const team = { id: "team_frontend", dept }
dept.teams = [team]
// flatted verwerkt circulaire refs β let op: uitvoer is flatted-formaat, niet standaard JSON
stringify(dept)
// Of gebruik een WeakSet-gebaseerde replacer als u standaard JSON-uitvoer nodig hebt:
function circularReplacer() {
const seen = new WeakSet()
return (_key, value) => {
if (typeof value === 'object' && value !== null) {
if (seen.has(value)) return '[Circular]'
seen.add(value)
}
return value
}
}
JSON.stringify(dept, circularReplacer(), 2)Probleem: Een space-waarde groter dan 10 doorgeven aan JSON.stringify() gooit geen fout β de waarde wordt stilzwijgend afgekapt op 10. Ontwikkelaars die 20 spaties inspringing verwachten voor diepe nesting krijgen slechts 10, wat leidt tot onverwachte opmaak in gegenereerde bestanden.
Oplossing: De maximale inspringing is 10 spaties. Gebruik voor diepe structuren 2-spaties inspringing (de meest gangbare conventie in JavaScript-projecten) en vertrouw op inklapbare editors voor navigatie.
const deepConfig = { server: { tls: { certs: { primary: "/etc/ssl/api.pem" } } } }
// Verwacht 20-spaties inspringing β maar space is afgekapt op 10
JSON.stringify(deepConfig, null, 20)
// Dezelfde uitvoer als JSON.stringify(deepConfig, null, 10)
// Geen fout, geen waarschuwing β stilzwijgend afgekaptconst deepConfig = { server: { tls: { certs: { primary: "/etc/ssl/api.pem" } } } }
// Gebruik 2 (de meeste projecten) of 4 spaties β overschrijd nooit 10
JSON.stringify(deepConfig, null, 2)
// {
// "server": {
// "tls": {
// "certs": {
// "primary": "/etc/ssl/api.pem"
// }
// }
// }
// }JSON.stringify vs Alternatieven β Snelle vergelijking
Verschillende situaties vragen om verschillende tools. JSON.stringify met een replacer dekt de meeste productiescenario's zonder afhankelijkheden. util.inspect is de juiste keuze voor snel terminaldebugging wanneer u kleuruitvoer nodig hebt maar geen geldige JSON. fast-json-stringify loont in API-routes met hoge doorvoer waar profilering serialisatiekosten laat zien; voor al het andere is de overhead van schemabeheer niet de moeite waard.
Veelgestelde vragen
Hoe druk ik JSON mooi af in JavaScript?
Roep JSON.stringify(data, null, 2) aan β het derde argument regelt de inspringing. Geef 2 of 4 voor spaties, of "\t" voor tabs. Geen import of installatie nodig: JSON is een globaal object in elke JavaScript-omgeving, inclusief browsers en Node.js.
const config = { host: "api.payments.internal", port: 8443, tls: true }
console.log(JSON.stringify(config, null, 2))
// {
// "host": "api.payments.internal",
// "port": 8443,
// "tls": true
// }Wat doet de space-parameter in JSON.stringify()?
De space-parameter bepaalt de inspringing in de uitvoer. Geef een getal (1β10) mee voor dat aantal spaties per niveau, of een string zoals "\t" voor een tab-teken. Waarden boven 10 worden stilzwijgend afgekapt op 10. Door null, 0 of niets mee te geven wordt compacte JSON op één regel gegenereerd.
const data = { service: "payments", version: 3, active: true }
JSON.stringify(data, null, 2) // 2 spaties inspringing
JSON.stringify(data, null, 4) // 4 spaties inspringing
JSON.stringify(data, null, '\t') // tab-inspringing
JSON.stringify(data) // compact: {"service":"payments","version":3,"active":true}Waarom geeft JSON.stringify() voor sommige waarden undefined terug?
JSON.stringify slaat eigenschappen met de waarde undefined, functies of Symbols stilzwijgend over β deze typen hebben geen JSON-representatie. Als de waarde op het hoogste niveau zelf undefined is, geeft de functie undefined terug (niet de string "undefined"). Gebruik null in plaats van undefined voor optionele velden die in de uitvoer moeten verschijnen.
const event = {
traceId: "tr_9a2f",
handler: () => {}, // functie β weggelaten
requestId: undefined, // undefined β weggelaten
sessionId: Symbol("s"), // Symbol β weggelaten
status: "ok"
}
JSON.stringify(event, null, 2)
// { "traceId": "tr_9a2f", "status": "ok" }Hoe ga ik om met Date-objecten bij het opmaken van JSON?
Date-objecten hebben een ingebouwde toJSON()-methode die een ISO 8601-string teruggeeft, waardoor JSON.stringify ze automatisch verwerkt. U hebt geen aangepaste replacer nodig voor datums β de geserialiseerde waarde zal een string zijn zoals "2026-03-10T14:22:00.000Z".
const order = {
orderId: "ord_8f2a91bc",
placedAt: new Date("2026-03-10T14:22:00Z"),
total: 42.98
}
JSON.stringify(order, null, 2)
// {
// "orderId": "ord_8f2a91bc",
// "placedAt": "2026-03-10T14:22:00.000Z",
// "total": 42.98
// }Hoe maak ik een JSON-string (geen object) op in JavaScript?
Parseer de string eerst met JSON.parse() en serialiseer opnieuw met JSON.stringify(). De twee aanroepen kunnen voor snel debuggen in één regel worden geketend.
const raw = '{"endpoint":"/api/v2/users","timeout":30,"retry":true}'
const formatted = JSON.stringify(JSON.parse(raw), null, 2)
console.log(formatted)
// {
// "endpoint": "/api/v2/users",
// "timeout": 30,
// "retry": true
// }Kan ik JSON.stringify() in de browser gebruiken?
Ja. JSON is een ingebouwde globale in elke moderne browser vanaf IE8 β geen script-tags of imports nodig. Open de DevTools-console en roep JSON.stringify() direct aan. Het werkt identiek aan de Node.js-versie, met dezelfde parameterhandtekening en dezelfde beperkingen rond BigInt en circulaire referenties.
// Werkt in Chrome, Firefox, Safari, Edge β geen imports nodig
const payload = { userId: "usr_7b3c", action: "checkout", cart: ["SKU-001", "SKU-002"] }
copy(JSON.stringify(payload, null, 2)) // copy() is een DevTools-hulpfunctieJavaScript geeft je volledige controle β replacer-functies, aangepaste toJSON(), verwerking van grote bestanden in Node.js. Wanneer je alleen een opgemaakte snippet wilt inspecteren of delen, is de JSON Formatter van ToolDeck de snelste weg: plak je JSON en krijg een opgemaakte, geaccentueerde uitkomst zonder enige omgevingsinstellingen.
Gerelateerde tools
Alex is a front-end and Node.js developer with extensive experience building web applications and developer tooling. He is passionate about web standards, browser APIs, and the JavaScript ecosystem. In his spare time he contributes to open-source projects and writes about modern JavaScript patterns, performance optimisation, and everything related to the web platform.
Marcus specialises in JavaScript performance, build tooling, and the inner workings of the V8 engine. He has spent years profiling and optimising React applications, working on bundler configurations, and squeezing every millisecond out of critical rendering paths. He writes about Core Web Vitals, JavaScript memory management, and the tools developers reach for when performance really matters.