JSON Formatter JavaScript β€” JSON.stringify()

Β·Front-end & Node.js DeveloperΒ·Beoordeeld doorMarcus WebbΒ·Gepubliceerd

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.

Before Β· json
After Β· json
{"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.

JavaScript β€” minimaal werkend voorbeeld
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:

JavaScript β€” space-varianten
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",...}
Note:Waarden van 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

JavaScript β€” array-replacer
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 uitgesloten

Functie-replacer β€” Waarden transformeren

JavaScript β€” functie-replacer
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
// }
Note:De replacer-functie wordt aangeroepen met 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.

JavaScript β€” Date-serialisatie
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.

JavaScript β€” aangepaste toJSON()
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"
// }
Note: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

JavaScript β€” BigInt-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

JavaScript β€” circulaire-referentie-replacer
// 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 native

JSON.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.

Parameter
Type
Default
Beschrijving
value
any
β€”
De te serialiseren waarde. Objecten, arrays, strings, getallen, booleans en null worden native ondersteund.
replacer
function | Array<string | number> | null
null
Filtert of transformeert sleutel/waarde-paren. Array = whitelist van op te nemen sleutels. Functie = wordt voor elk sleutel/waarde-paar aangeroepen.
space
number | string | null
null
Inspringing. Getal = spaties per niveau (max 10). String = letterlijke inspringing (bijv. "\t"). null of 0 = compacte 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

Node.js 18+ β€” een JSON-bestand herformatteren (ESM)
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)

Node.js 18+ β€” asynchroon bestand herformatteren
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().

JavaScript β€” fetch + mooi afdrukken (Node.js 18+ of browser)
// 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')
JavaScript β€” response.text() als u eerst de ruwe string nodig hebt
// 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.

bash β€” JSON-bestand mooi afdrukken met Node.js
# 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)))
"
bash β€” universele alternatieven
# 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}'
Note:Bij het uitvoeren van Node.js in ESM-modus (bijv. met "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.

bash
npm install fast-json-stringify
JavaScript β€” fast-json-stringify voor telemetriegebeurtenissen
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",...}'
Note: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.

Node.js 18+ β€” util.inspect met kleuren
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 }))
Warning:Gebruik de uitvoer van 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

bash
npm install stream-json
Node.js 18+ β€” stream-json voor grote arrays
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.

Node.js 18+ β€” NDJSON met readline
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))
  }
}
Note:Schakel van 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.

❌ Vergeten dat undefined-waarden stilzwijgend worden weggegooid

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.

Before Β· JavaScript
After Β· JavaScript
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 waarschuwing
const 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
// }
❌ BigInt gooit TypeError

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.

Before Β· JavaScript
After Β· JavaScript
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 BigInt
function 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"
// }
❌ Circulaire referentie doet crashen

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.

Before Β· JavaScript
After Β· JavaScript
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 JSON
import { 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)
❌ space > 10 gebruiken (stilzwijgend afgekapt)

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.

Before Β· JavaScript
After Β· JavaScript
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 afgekapt
const 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.

Methode
Opgemaakte uitvoer
Geldig JSON
Non-ASCII
Aangepaste typen
Circulaire refs
Installatie vereist
JSON.stringify
βœ“
βœ“
βœ“
⚠️ via replacer
βœ— (gooit fout)
Nee
JSON.stringify + replacer
βœ“
βœ“
βœ“
βœ… volledige controle
βœ“
Nee
util.inspect
βœ“
βœ—
βœ“
βœ… native
βœ“
Nee (Node ingebouwd)
fast-json-stringify
βœ—
βœ“
βœ“
❌ alleen schema
βœ—
npm install
flatted
βœ“
βœ— (eigen formaat)
βœ“
βœ… alleen circulair
βœ“
npm install
jq (CLI)
βœ“
βœ“
βœ“
N/A
N/A
Systeeminstallatie

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.

JavaScript
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.

JavaScript
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.

JavaScript
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".

JavaScript
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.

JavaScript
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.

JavaScript
// 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-hulpfunctie

JavaScript 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

Ook beschikbaar in:PythonGoBash
AC
Alex ChenFront-end & Node.js Developer

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.

MW
Marcus WebbTechnisch beoordelaar

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.