Hoe JSON online te formatteren: complete gids met voorbeelden

Terug in mijn WP Adminify dagen, een support ticket landde die simpelweg luidde: & quot; Instellingen importeren gebroken Niets werkt." De gebruiker had met de hand een geëxporteerde instellingen bestand - een achterliggende komma op lijn 217 van een 9.000-lijn JSON blob - en mijn importeur reageerde met de wereld' minst nuttige fout: Importeren mislukt.

Ik heb die foutmelding geschreven. Dat is voor mij.

Het kostte ons tweeën 40 minuten heen en weer om één komma te vinden die een fatsoenlijke formatter in een halve seconde zou hebben gemarkeerd. Dat ticket veranderde hoe ik denk over JSON Tooling, en jaren later vormde het hoe ik de bouwde JSON-formatter Op Toolz.dev: de foutlocatie is geen leuk om te hebben. Het is het hele product.

Deze gids behandelt hoe JSON online te formatteren, waarom formatteren mislukt, en de syntaxis vallen die iedereen eten ' s middag uiteindelijk - inclusief de mijne.

tl;dr: Om JSON online te formatteren, plakt u het in een client-side tool zoals de Toolz.dev JSON-formatter- het drukt onmiddellijk behoorlijk af, markeert syntaxisfouten met regelnummers en uploadt nooit uw gegevens. Als het formatteren mislukt, heeft u vrijwel zeker een achterliggende komma, enkele aanhalingstekens of een niet-geciteerde sleutel. Gebruik inspringing met 2 spaties, tenzij uw team anders zegt.

Wat doet "het formatteren van JSON" eigenlijk?

Opmaak - mooi afdrukken, als u ' zin heeft - voegt inspringing en regeleindes toe zodat de structuur zichtbaar wordt De gegevens veranderen 't met een enkel bit. It' is een presentatietransformatie, meer niet.

deze:

{"employees":[{"firstName":"John","lastName":"Doe","department":"Engineering","skills":["JavaScript","Python","Docker"]},{"firstName":"Jane","lastName":"Smith","department":"Design","skills":["Figma","CSS","Illustration"]}],"company":"Acme Corp","founded":2015}

wordt dit:

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "department": "Engineering",
      "skills": ["JavaScript", "Python", "Docker"]
    },
    {
      "firstName": "Jane",
      "lastName": "Smith",
      "department": "Design",
      "skills": ["Figma", "CSS", "Illustration"]
    }
  ],
  "company": "Acme Corp",
  "founded": 2015
}

identieke gegevens. Maar slechts één van hen laat je in één oogopslag zien dat Jane in ontwerp is.

Er is een bonus waar de meeste mensen niet aan denken: formatteren is ook een vermomming validatie. Een formatter moet uw document ontleden om het opnieuw te formatteren, dus als de JSON kapot is, vertelt een goede formatter u waarheen ook- wat de eigenlijke reden is om er een te gebruiken in plaats van te loensen.

Hoe formatteer je JSON online in de praktijk?

De hele workflow duurt ongeveer vijftien seconden:

1. Kopieer de JSON van waar het ook woont - DevTools Network tab (klik met de rechtermuisknop op een verzoek → Reactie kopiëren), curl uitvoer, een logbestand, een slack-bericht van een collega.
2. Open de JSON-formatter. Geen aanmelding, geen inloggen. Het laadt en je plakt.
3. Lees de uitvoer. Geldige JSON komt terug ingesprongen en syntaxis-gemarkeerd, met inklapbare secties voor grote documenten. Ongeldige JSON krijgt een foutmelding met een regelnummer en een duidelijke Engelse beschrijving.
4. Kopiëren of downloaden. Eén klik in ieder geval.

Dat's het Het interessante deel is't het gelukkige pad - het's stap 3 als het misgaat Dus laat's fout gaan.

Waarom formatteert mijn JSON niet?

Als een formatter uw JSON weigert, schendt het document de grammatica in RFC 8259. In mijn ervaring - zowel door mijn eigen foutopsporing als door het bouwen van de tool waarin mensen hun kapotte JSON plakken - is & # 39; is bijna altijd een van de vijf dingen.

1. Sleep komma's

{
  "name": "Alice",
  "age": 30,
}

SyntaxError: Unexpected token } in JSON at position 34

JavaScript staat dit toe. JSON heeft dat nooit gedaan. Verwijder de komma na het laatste item in elk object en elke array:

{
  "name": "Alice",
  "age": 30
}

Dit is mijn support-ticket-komma. Respecteer het.

2. Enkele aanhalingstekens

{ 'name': 'Alice' }

De klassieke Python Tell. str(my_dict) produceert pseudo-json met één citaat; json.dumps(my_dict) produceert het echte werk. Als je ' Ik zie enkele aanhalingstekens in iets dat beweert JSON te zijn, heeft iemand een dict gedrukt in plaats van het te serialiseren - I' heb het gedaan, jij ' heb het gedaan, wij ' zullen het allemaal opnieuw doen.

{ "name": "Alice" }

3. Ongedoodige terugslag

{ "path": "C:\new\test" }

Ziet er onschadelijk uit. doch \n is een nieuwe lijn en \t is een tabblad, dus dit parseert in een pad met daadwerkelijke regeleinden erin - of mislukt regelrecht op reeksen zoals \x. Windows-paden zijn het nummer één slachtoffer:

{ "path": "C:\\new\\test" }

4. Niet-overeenkomende haakjes

{
  "users": [
    {"name": "Alice"},
    {"name": "Bob"}
}

ontbrekend ]. Triviaal hier, brutaal in een configuratie die zes niveaus diep is genest. Dit is een categorie fouten die mensen echt slecht kunnen vinden en parsers onmiddellijk kunnen vinden - uitbesteden.

5. JavaScript-waarden die niet JSON zijn

{ "value": undefined, "count": NaN }

undefined, NaN, en Infinity zijn javascript, niet json. JSON.stringify stilletjes bekeert NaN tegen null en druppels undefined eigenschappen volledig - wat betekent dat de bug vaak is't in de JSON you're looking at, it's upstream in wat het ook heeft geproduceerd Gebruik null expliciet en controleer uw serializer.

de formatterig Vangt alle vijf met het regelnummer als bijgevoegd. Die laatste zin is de hele reden waarom deze gereedschapscategorie bestaat.

Moet je 2 spaties, 4 spaties of tabbladen gebruiken?

Het eeuwige debat, JSON-editie. Hier is de eerlijke vergelijking:

Mijn positie, en ik sterf op deze kleine heuvel: 2 spaties voor JSON, ongeacht wat uw andere code gebruikt. JSON nestelt dieper dan de typische broncode - API-reacties van vier en vijf niveaus diep zijn normaal - en inspringingen met vier ruimtes veranderen ze in horizontale scrolloefeningen. Zelfs in teams met veel Python heb ik JSON op twee velden ingesteld en niemand heeft ooit twee keer geklaagd.

Wat je ook kiest, codeer het zodat het debat eindigt:

# .editorconfig
[*.json]
indent_style = space
indent_size = 2
insert_final_newline = true

de formatterig Ondersteunt beide breedtes, dus het matchen van de conventie van uw project is een vervolgkeuzelijst, geen discussie.

Hoe zit het met formatteren vanaf de opdrachtregel?

Soms is de terminal dichterbij dan een browsertabblad. Mijn werkelijke gebruik:

# jq — the standard. Install it, learn 10% of it, profit.
curl -s https://api.example.com/users | jq .

# Python — already on basically every machine
curl -s https://api.example.com/users | python -m json.tool

# Node, if you enjoy typing
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync(0,'utf8')),null,2))" < data.json

Waar elk wint, eerlijk:

• JQ voor alles wat is geschreven, herhaald of gepiped - en voor het extraheren van velden (jq '.data.users[].email') in plaats van hele documenten te lezen.
• de browsertool voor eenmalig, voor alles wat je wilt navorsen met opvouwbare secties en voor het tonen van een teamgenoot kunt u 't scherm-deel een jq-expressie aan een projectmanager.
• VS-code ((Shift+Alt+F) voor JSON-bestanden die in de repo leven en toch open zijn.

Ik gebruik alle drie dagelijks. Iedereen die je vertelt dat de ene de andere vervangt, verkoopt iets.

Een gewoonte die het waard is om te stelen: curl -s ... > response.json liever, formatteer het bestand vervolgens. Wanneer het antwoord een HTML-foutpagina blijkt te zijn die een Content-Type: application/json kostuum - gebeurt meer dan iemand van ons zou willen - u ' zal de originele bytes willen, niet uw browser ' s interpretatie ervan.

Drie opmaaktechnieken die de meeste mensen overslaan

Sorteer toetsen alfabetisch. Verschillende serializers zenden sleutels uit in verschillende bestellingen, waardoor diffs van de "dezelfde' gegevens eruitzien als herschrijft. Het sorteren van toetsen voordat het differen van een diff van 300 regels verandert in de 2 regels die daadwerkelijk zijn veranderd. Dit past prachtig bij de Tekstdiff-tool bij het vergelijken van de enscenering versus de productie-ladingen - een truc die mij persoonlijk heeft gered tijdens ten minste twee incidenten.

Houd korte arrays inline. "colors": ["red", "green", "blue"] Op één regel leest beter dan vijf ceremonieregels. Goede formatters doen dit automatisch voor arrays van primitieven; het is het verschil tussen geformatteerde JSON die je kunt doorbladeren en geformatteerde JSON die technisch mooie maar 4.000 regels lang zijn.

Formatteer het fragment, niet het bestand. Voor een document van 15 MB als je maar om één object geeft: kopieer dat geneste object, formatteer het alleen, klaar. Het hele bestand formatteren zodat je er 40 regels van kunt lezen is verspilde moeite - maar als je het hele ding nodig hebt, verwerkt een tool aan de clientzijde het zonder een uploadvoortgangsbalk, omdat er ' geen upload.

en weet wanneer nee Naar formatteren: verkleinde JSON in productiebundels en API-reacties moeten verkleind blijven. Formatteren is voor ogen, niet voor draden. Als u de tegenovergestelde richting nodig heeft, hetzelfde kwast Vermindert met één klik.

Veelgestelde vragen

Hoe formatteer ik JSON online gratis?

Plak je JSON in de Toolz.dev JSON-formatter- het formatteert direct met syntaxisaccentuering en foutcontrole, gratis, geen aanmelding Verwerking gebeurt in uw browser, dus niets dat u plakt wordt ergens geüpload Dat laatste deel doet er meer toe dan de & quot; free" deel als de payload tokens of gebruikersgegevens bevat.

Waarom wordt mijn JSON niet correct geformatteerd?

Het document heeft een syntaxisfout, en de hoofdverdachten zijn achter komma's, enkele aanhalingstekens, niet geciteerde sleutels, niet-ontsnapte backslashes en niet-overeenkomende haakjes Een formatter die valideert zal naar de exacte regel wijzen Als de fout geen zin heeft, controleer dan of je eigenlijk JSON helemaal - API's houden van het retourneren van HTML foutpagina's met een JSON-inhoudstype.

Wat is het verschil tussen formatteren en valideren van JSON?

Het formatteren herschrijft witruimte voor leesbaarheid; valideren controleert het document aan de hand van de RFC 8259-grammatica In de praktijk zijn ze ' dezelfde bewerking - een formatter moet parseren (valideren) voordat deze opnieuw kan formatteren. That's waarom "it won't formaat" en "it's ongeldig" zijn dezelfde diagnose.

Moet ik 2 of 4 spaties gebruiken voor JSON-inspringing?

Gebruik 2 spaties, tenzij uw project al gestandaardiseerd is op 4. JSON nest die dieper dan de meeste broncode, en 2-space-inspringing houdt real-world API-antwoorden leesbaar zonder horizontaal te scrollen. Vergrendel dan de keuze in .editorconfig Dus het komt nooit meer naar voren in codebeoordeling.

Kan ik JSON formatteren in VS-code zonder extensie?

Ja - Shift+Alt+F (of Shift+Option+F Op Mac) formatteert elk JSON-bestand met de ingebouwde formatter en "formatteert op Save" maakt het automatisch. Merk op dat VS Code's eigen settings.json is JSONC, dat reacties toestaat - don' laat dat je ervan overtuigen dat gewone JSON dat doet.

Is het veilig om API-reacties in online JSON-formatters te plakken?

Alleen in client-side ones Tal van formatter sites POST uw invoer naar een server, wat betekent dat uw API-antwoord - tokens, e-mails, alles - bestaat nu in iemand anders' s logs De Toolz.dev-formatter Draait volledig in uw browser; verifieer het zelf door het tabblad Netwerk te bekijken terwijl u plakt.

Hoe formatteer ik een enorm JSON-bestand (10 MB+)?

Browsertools aan de clientzijde verwerken bestanden in dit bereik prima, aangezien there's geen uploadstap - de pasta is het langzame deel. Na ongeveer 50 MB schakelt u over op streamingtools: jq op de opdrachtregel, of pak alleen de sectie die u nodig hebt en formatteer die. Plak nooit enorme bestanden in servergebaseerde tools; je wacht op een upload zonder voordeel.

Hoe verklein ik JSON in plaats van het te formatteren?

Hetzelfde gereedschap, tegenoverliggende knop - de JSON-formatter Heeft een minify-modus met één klik die alle witruimte stript. Verminder voor productie payloads, localstorage en log pijplijnen; formaat voor mensen. De gegevens zijn beide identiek.

Verandert het formatteren van JSON de gegevens?

Nee - opmaak herschrijft alleen witruimte, dus de sleutels, waarden en structuur blijven identiek in betekenis Een opgemaakt document en de geminificeerde versie ervan parseren naar precies hetzelfde object Als uw gegevens daadwerkelijk veranderen, hebt u iets met de hand bewerkt in plaats van alleen opmaak.

Wat is een JSON-verfraaier?

It' s een andere naam voor een JSON-formatter - een tool die minified of rommelige JSON neemt en inspringing en regeleindes toevoegt zodat een mens het kan lezen. "Beautify," "pretty-print," en "format" beschrijven allemaal dezelfde bewerking De JSON-formatter Doet het in één pasta.

De gewoonte van vijftien seconden

Het formatteren van JSON is een kleine vaardigheid met extra grote rendementen - de meeste & quot; de API is gebroken" momenten zijn echt & quot; de payload is onleesbaar" momenten, en die lossen op zodra de structuur zichtbaar wordt. Zorg dat de lus in pasta-formaat wordt gelezen tot vijftien seconden en een hele categorie foutopsporingswrijving verdwijnt.

de JSON-formatter op Toolz.dev Is de versie van deze tool die ik wilde tijdens dat ondersteuningsticket: direct, precies over fouten en niet in staat om uw gegevens te lekken omdat het nooit wordt ontvangen.

Zodra uw JSON schoon is, is de volgende stap meestal het ergens naartoe verplaatsen - naar een spreadsheet met de JSON naar CSV-converter, terug uit één met de CSV naar JSON-converter, of in een configuratiepijplijn via de YAML-validator. beginnen met de JSON naar CSV-gids Of ga terug naar de Volledige JSON-toolsgids voor de volledige kaart.

Verwante artikelen:

• De ultieme gids voor JSON-tools (2026)
• JSON naar CSV-conversie: 5 methoden die ontwikkelaars gebruiken in 2026
• Gratis gids voor online teksttools