Siirry sisältöön
🛠️
Whiz Tools

JSON-muotoilija: Kaunista ja validoi JSON verkossa ilmaiseksi

Muotoile tiivistetty JSON välittömästi oikealla sisennyksellä. Ilmainen online-JSON-muotoilija validoi syntaksin, kaunistaa koodin ja nopeuttaa virheenkorjausta. Toimii selaimessa reaaliaikaisella muotoilulla.

JSON-muotoilija

Muotoile ja kaunistele JSON-tietosi tällä yksinkertaisella työkalulla - muotoilu tapahtuu automaattisesti kirjoittaessasi!

Muotoiltu JSON ilmestyy tähän automaattisesti...

Latauslaskuri...
📚

Dokumentaatio

Mikä on JSON-muotoilija?

JSON-muotoilija on työkalu, joka ottaa JSON-tekstin (JavaScript Object Notation) ja kirjoittaa sen uudelleen sisennyksineen ja rivinvaihtoineen muuttamatta itse tietoja. JSON on pelkkä tekstimuoto jäsenneltyjen tietojen tallentamiseen ja lähettämiseen, ja se koostuu nimi–arvo-pareista ja luetteloista. Ohjelmat säästävät yleensä tilaa poistamalla kaikki ylimääräiset tyhjemerkit, jolloin tuloksena on yksi tiivis rivi, jota ihmisen on vaikea lukea. Muotoilijaa kutsutaan myös JSON-kaunistajaksi tai pretty printeriksi, ja se lisää tyhjemerkit takaisin yhdenmukaisella tavalla, jotta rakenne näkyy. Tämä työkalu muotoilee JSONin automaattisesti sitä kirjoitettaessa tai liitettäessä. Muotoilupainiketta ei ole, vaan tulos päivittyy jokaisella näppäinpainalluksella. Palautuspainike tyhjentää syötteen, ja kopiointipainike kopioi muotoillun tuloksen.

JSON-syntaksin säännöt

JSON on määritelty RFC-määrityksessä 8259. Siinä on kaksi säilötyyppiä:

Objektit sisältävät nimi–arvo-pareja kaarisulkeiden sisällä:

1{"name": "John", "age": 30, "city": "New York"}
2

Taulukot sisältävät järjestettyjä luetteloita hakasulkeiden sisällä:

1["apple", "banana", "cherry"]
2

JSON-arvon on oltava jokin kuudesta tyypistä: merkkijono, luku, totuusarvo (true tai false), null, objekti tai taulukko.

Muutamat säännöt aiheuttavat suurimman osan virheistä:

  • Ominaisuuksien nimet on ympäröitävä kaksinkertaisilla lainausmerkeillä. {name: "John"} on virheellinen; sen on oltava {"name": "John"}.
  • Merkkijonoissa on käytettävä kaksinkertaisia, ei yksinkertaisia lainausmerkkejä.
  • Objektin tai taulukon viimeisen alkion jälkeen ei saa olla pilkkua (loppupilkut eivät ole sallittuja).
  • JSONissa ei ole kommenttisyntaksia, vaikka sen kaari- ja hakasulkeita muistuttava ulkoasu on peräisin JavaScriptistä.
  • JSONissa ei ole arvoa undefined. Puuttuvan arvon tilalla on käytettävä arvoa null.

Yleinen virhe on liittää JSONin sijaan JavaScript-objektiliteraali. {name: 'John', age: undefined} on kelvollista JavaScriptiä mutta ei kelvollista JSONia. JSON-muoto on {"name": "John", "age": null}.

Näin tämä JSON-muotoilija toimii

Monet JSON-muotoilijat käsittelevät tekstin funktiolla JSON.parse() rakentaakseen JavaScript-objektin ja muuntavat sen sitten takaisin tekstiksi funktiolla JSON.stringify(). Tällä edestakaisella muunnoksella on sivuvaikutus: JavaScriptin luvut ovat IEEE-standardin 754 mukaisia kaksinkertaisen tarkkuuden liukulukuja, jotka eivät pysty esittämään kaikkia kokonaislukuja täsmällisesti, kun ne ylittävät arvon 2^53 − 1 (9,007,199,254,740,991). Tunnus, kuten 9007199254740993, voi muuttua arvoksi 9007199254740992 tämän edestakaisen muunnoksen jälkeen.

Tämä työkalu ohittaa kyseisen vaiheen. Se lukee syötteen merkki merkiltä pienellä käsin kirjoitetulla jäsentimellä ja kopioi jokaisen luvun tai merkkijonon tekstin täsmälleen kirjoitetussa muodossa sen sijaan, että muuntaisi sen JavaScript-arvoksi, ja sijoittaa sen sitten oikealle sisennystasolle. Koska lukuja ei koskaan muun­neta liukuluvuiksi, kaikenkokoiset kokonaisluvut säilyttävät täsmälliset numeronsa. Jos objektissa on sama avain kirjoitettuna kahdesti, molemmat esiintymät säilytetään paikoillaan sen sijaan, että ne yhdistettäisiin viimeiseksi esiintymäksi, kuten JavaScript-objektia rakennettaessa tapahtuisi.

Prosessi vaihe vaiheelta:

  1. Lue seuraava tunniste (objekti, taulukko, merkkijono, luku, true, false tai null).
  2. Tarkista se JSON-kielioppia vasten. Hylkää se, jos se rikkoo sääntöä, kuten jos avain on ilman lainausmerkkejä tai lopussa on pilkku.
  3. Kopioi tunnisteen teksti muuttamatta tulosteeseen.
  4. Lisää rivinvaihto ja sisennä 2 välilyönnillä kutakin sisäkkäisyystasoa kohti objektin tai taulukon sisällä. Tyhjä objekti tai taulukko säilyy yhdellä rivillä muodossa {} tai [].
  5. Toista, kunnes koko syöte on luettu.

Sisennys on kiinteästi 2 välilyöntiä, eikä sitä voi muuttaa asetuksella. Kun syöttökenttä on tyhjä, tulospaneelissa näkyy paikkamerkkiteksti ”Muotoiltu JSON näkyy tässä automaattisesti...”. Jos syöte rikkoo JSON-sääntöä, työkalu näyttää viestin ”Virheellinen JSON: tarkista syötteesi” teknisen jäsenninviestin sijaan, joka ilmoittaisi tarkan merkkikohdan. Selainten sisäänrakennettu JSON.parse() puolestaan ilmoittaa virhetekstissään merkkikohdan.

Laskuesimerkki

Tämä tiivistetty syöte:

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

muuttuu muotoon:

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

Kukin sisäkkäinen objekti tai taulukko sisennetään yhden tason verran enemmän kuin sen yläpuolinen objekti tai taulukko, joten address-kentän ja sen kolmen kentän välinen suhde näkyy heti.

Toinen esimerkki osoittaa, miksi literaalien kopioiminen on tärkeää. Tämä syöte:

1{"id":9007199254740993}
2

muotoillaan muotoon:

1{
2  "id": 9007199254740993
3}
4

Numerot säilyvät täsmälleen siinä muodossa kuin ne kirjoitettiin. Muotoilija, joka perustuu funktioon JSON.parse() ja sen jälkeen funktioon JSON.stringify(), muuttaisi luvun sen sijaan huomaamatta arvoksi 9007199254740992.

Yleiset JSON-virheet

  • Ominaisuuden nimi ilman lainausmerkkejä: {name: "John"}. Korjaus: {"name": "John"}.
  • Loppupilku: {"age": 30,}. Korjaus: poista pilkku ennen sulkevaa kaarisuljetta.
  • Epäyhteensopivat sulkeet: {"data": [1, 2}. Korjaus: sulje taulukko merkillä ] ennen objektin sulkemista.
  • Sulkematon merkkijono: {"name": "John}. Korjaus: lisää puuttuva sulkeva lainausmerkki.
  • Yksinkertaiset lainausmerkit: {'name': 'John'}. Korjaus: käytä kaksinkertaisia lainausmerkkejä.
  • undefined, NaN tai Infinity: mikään näistä ei ole kelvollinen JSON-arvo. Käytä arvoa null tai merkkijonoa.

Näiden virheiden yleinen lähde on objektin kopioiminen suoraan selaimen konsolista tai palvelimen lokista, sillä niissä on usein vain JavaScriptille tarkoitettua syntaksia, joka on siivottava ennen kuin teksti on kelvollista JSONia.

Milloin JSON-muotoilijaa käytetään

JSON-muotoilijoita käytetään useimmiten API-vastausten tarkasteluun, sillä vastaukset lähetetään yleensä tiivistettyinä kaistanleveyden säästämiseksi. Niitä käytetään myös asetustiedostojen, kuten package.json- tai composer.json-tiedostojen, tarkistamiseen käsin, selaimen paikallisesta tallennustilasta tai konsolista kopioitujen tietojen lukemiseen sekä toisesta järjestelmästä saadun tietoaineiston rakenteen ymmärtämiseen.

Muita tapoja muotoilla JSONia

  • Selaimen kehittäjätyökalut: Chrome, Edge ja Firefox muotoilevat JSON-vastaukset automaattisesti Network-välilehden esikatseluruudussa.
  • Koodieditorit: Visual Studio Code muotoilee avoimen JSON-tiedoston näppäinyhdistelmällä Alt+Shift+F (Macissa Shift+Option+F). Useimmissa editoreissa on vastaava pikanäppäin tai muotoilulaajennus.
  • Komentorivi: jq (jq . file.json) ja Pythonin sisäänrakennettu python -m json.tool file.json muotoilevat JSONia päätelaitteessa.

JSON-muotoilun toteuttaminen koodissa

Useimmissa ohjelmointikielissä on JSON-kirjasto, jossa on sisennysasetus. JavaScriptissä:

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

Pythonissa:

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

Molemmissa lähestymistavoissa teksti jäsennetään ensin alkuperäiseksi tietorakenteeksi ja sarjallistetaan sitten uudelleen välilyönteineen. Tämä on helppo toteuttaa, mutta se voi muuttaa lukuja. JavaScript tallentaa jokaisen luvun kaksinkertaisen tarkkuuden liukulukuna, joten 9007199254740993 palaa arvona 9007199254740992. Python säilyttää kokonaisluvut täsmällisinä, koska Pythonin kokonaisluvuilla ei ole kokorajoitusta, mutta se kirjoittaa silti 1.0e2 uudelleen muotoon 100.0 ja muuttaa arvon 1e999 arvoksi Infinity, joka ei ole kelvollinen JSON-arvo. Sovellukset, jotka tarvitsevat täsmällisiä suuria kokonaislukuja, kuten tietokantojen tunnisteita, tallentavat ne JSONissa usein merkkijonoina lukujen sijaan.

Lyhyt JSONin historia

Douglas Crockford määritteli JSONin 2000-luvun alussa ja otti sen syntaksin JavaScriptin objektiliteraaleista, mutta teki siitä käytettävän millä tahansa kielellä. RFC 4627 virallisti sen vuonna 2006. Se levisi nopeasti, koska sitä oli lyhyempi kirjoittaa kuin XML:ää ja se vastasi suoraan JavaScript-objekteja. Tämä oli tärkeää, kun verkkosovellukset alkoivat hakea tietoja taustalla kokonaisten sivujen uudelleenlataamisen sijaan. 2010-luvulle tultaessa siitä oli tullut REST-rajapintojen ja MongoDB:n kaltaisten tietokantojen oletusmuoto.

Usein kysyttyä

Mikä on JSON-muotoilija? Työkalu, joka lisää JSON-tekstiin sisennyksiä, rivinvaihtoja ja välilyöntejä, jotta sen rakenne on helppo lukea tietoja muuttamatta.

Muuttuuko data muotoilussa? Ei. Muotoilu muuttaa vain tyhjemerkkejä. Tämä työkalu kopioi jokaisen merkkijonon ja luvun täsmälleen kirjoitetussa muodossa, joten muotoillun tulosteen arvot vastaavat syötettä täsmällisesti, myös luvut, jotka ovat liian suuria tallennettaviksi täsmällisesti JavaScript-lukuna.

Miksi saan ”Virheellinen JSON” -virheen? Syöte rikkoo JSON-sääntöä. Yleisiä syitä ovat ominaisuuksien nimet ilman lainausmerkkejä, loppupilkut, yksinkertaiset lainausmerkit, sulkematon merkkijono tai yhteensopimattomat sulkeet. Tämä työkalu ei näytä ongelman tarkkaa merkkikohtaa; syötteen tarkistaminen edellä lueteltuja sääntöjä vasten löytää virheen yleensä nopeasti.

Voiko JSON sisältää kommentteja? Ei. Määritys ei salli niitä. JSONC:n ja JSON5:n kaltaiset muodot lisäävät JSON-syntaksin päälle kommenttituen tilanteisiin, joissa siitä on hyötyä, kuten asetustiedostoissa.

Mikä on JSONin vakiomuotoinen sisennys? Kaksi välilyöntiä on verkkokehityksen yleisin käytäntö, ja tämä työkalu käyttää sitä. Joissakin tyylioppaissa käytetään sen sijaan neljää välilyöntiä tai sarkaimia; JSON-määritys ei itsessään edellytä mitään tiettyä sisennystä.

Mitä eroa on funktioilla JSON.parse() ja JSON.stringify()? JSON.parse() muuttaa JSON-merkkijonon JavaScript-arvoksi. JSON.stringify() tekee päinvastoin: se muuttaa JavaScript-arvon JSON-merkkijonoksi ja hyväksyy sisennysargumentin tulosteen muotoilua varten. Tämä työkalu ei käytä kumpaakaan funktiota sisäisesti, minkä ansiosta se säilyttää suuret kokonaisluvut täsmällisinä.

Viitteet

  1. RFC 8259 — The JavaScript Object Notation (JSON) Data Interchange Format
  2. MDN Web Docs: JSON
  3. json.org