CodeKitHub
JSON-työkalut

JSON-muotoilija ja -validoija verkossa

Viimeksi päivitetty:

Liitä JSON alle muotoillaksesi, kaunistaaksesi tai minifioidaksesi sen välittömästi. Työkalu validoi JSON:isi muotoillessaan ja näyttää tarkan virheen, jos jokin on vialla. Kaikki tapahtuu paikallisesti selaimessasi — dataasi ei koskaan ladata mihinkään palvelimeen.

Käyttöohje

  1. Liitä JSON:isi vasemmanpuoleiseen syöttökenttään (tai napsauta "Lataa esimerkki" kokeillaksesi sitä).
  2. Valitse 2 tai 4 välilyönnin sisennys.
  3. Napsauta "Muotoile" kaunistaaksesi, tai "Minifioi" pakataksesi sen yhdeksi riviksi.
  4. Jos JSON on virheellinen, lue virheviesti laatikoiden alta löytääksesi ongelman.
  5. Napsauta "Kopioi" kopioidaksesi tuloksen leikepöydälle.

Esimerkki

Syöte

{"name":"CodeKitHub","tools":["json","base64"],"free":true}

Tuloste

{
  "name": "CodeKitHub",
  "tools": [
    "json",
    "base64"
  ],
  "free": true
}

Sama data, muotoiltuna 2 välilyönnin sisennyksellä. Minifiointi tekee päinvastoin: se poistaa kaiken tyhjätilan.

Mikä tämä työkalu on?

JSON-muotoilija ottaa raakaa, minifioitua tai sotkuista JSON-tekstiä ja kirjoittaa sen uudelleen johdonmukaisella sisennyksellä ja rivinvaihdoilla, jotta se on helppo lukea. JSON (JavaScript Object Notation) on yleisin API:en, konfiguraatiotiedostojen ja lokijärjestelmien käyttämä dataformaatti, mutta palvelimet lähettävät sen yleensä yhtenä pitkänä, lukukelvottomana rivinä kaistan säästämiseksi.

Tämä työkalu toimii myös JSON-validoijana: se jäsentää syötteesi samoilla tiukoilla säännöillä kuin selaimet käyttävät, joten jos JSON:issasi on puuttuva pilkku, lainaamaton avain tai ylimääräinen loppupilkku, näet tarkan virheviestin hiljaisen epäonnistumisen sijaan.

JSON on virallisesti määritelty kahdessa yhdenmukaisessa standardissa, RFC 8259 ja ECMA-404 — ja spesifikaatio on tarkoituksella tiukempi kuin JavaScript itse, minkä vuoksi katkelma, joka toimii hyvin JS-koodina, voi silti epäonnistua tässä tiukassa JSON-validoinnissa.

Käytännön vinkkejä

  • API:a virheenkorjaamassa? Liitä raaka vastaus ensin, muotoile toiseksi — validoija osoittaa tarkan rivin ja sarakkeen syntaksiongelmalle, mikä voittaa yksirivisen blobin tuijottamisen.
  • Käytä 2 välilyönnin sisennystä ruudulta lukemiseen, ja minifioi ennen JSON:in liittämistä URL-osoitteeseen, ympäristömuuttujaan tai chat-viestiin — siellä tyhjätila vain maksaa tavuja.
  • JSON5-tyyliset kommentit ja loppupilkut ovat kaksi yleisintä syytä, miksi käsin kirjoitettu konfiguraatio "näyttää hyvältä" mutta epäonnistuu validoinnissa: tiukka JSON ei salli kumpaakaan.
  • Erittäin suurille tiedostoille (lokit, tietokantavedokset) muotoile vain se katkelma, josta olet kiinnostunut — editorisi pysyy responsiivisena ja rakenne on helpompi seurata.

Mihin tämä sopii todellisissa työnkuluissa

Yleisin näkemämme kulku: API palauttaa Base64-kääritettyä tai minifioitua JSON:ia tokenissa tai webhook-hyötykuormassa. Pura Base64 ensin, muotoile JSON toiseksi ja vertaile kahta vastausta kolmanneksi, kun jotain muuttui ympäristöjen välillä. Jokaisella vaiheella on oma työkalunsa täällä, ja hyötykuormasi eivät koskaan poistu selaimesta missään niistä.

Frontend-kehittäjät käyttävät minifiointisuuntaa yhtä usein kuin muotoilua: julkaisetko suuren staattisen JSON-tiedoston? Sen minifiointi säästää tyypillisesti 20–30 % jo ennen gzipin alkamista.

→ Base64-koodain / -purkaja · Tekstin vertailu

Yleisimmät JSON-virheet ja niiden korjaus

Suurin osa "virheellinen JSON" -ilmoituksista johtuu pienestä joukosta toistuvia syitä. Alla oleva taulukko kattaa yleisimmät, jotka törmäät käsin muokatuissa konfiguraatiotiedostoissa tai kopioidussa API-vastauksessa.

VirheEsimerkkiKorjaus
Loppupilkku{"a": 1, "b": 2,}Poista pilkku viimeisen kohteen jälkeen objektissa tai taulukossa.
Yksinkertaiset lainausmerkit{'a': 1}JSON vaatii kaksoislainausmerkit avaimille ja merkkijonoille.
Lainaamaton avain{a: 1}Kääri jokainen avain lainausmerkkeihin: {"a": 1}.
Kommentit{ // huom\n "a": 1 }Tiukka JSON ei salli kommentteja — poista // ja /* */ ennen validointia.
Puuttuva pilkku{"a": 1 "b": 2}Lisää pilkku jokaisen avain-arvo-parin väliin.
NaN / undefined / Infinity{"a": NaN}Nämä ovat kelvollista JavaScriptiä mutta eivät JSON:ia — käytä null-arvoa tai merkkijonoa.

Yleisiä käyttötapauksia

  • Yhtenä lukukelvottomana rivinä palautetun minifioidun API-vastauksen lukeminen sen rakenteen ymmärtämiseksi virheenkorjauksen aikana.
  • Konfiguraatiotiedoston (kuten package.json tai JSON-pohjaisen asetustiedoston) validointi, jota sovellus mystisesti ei lue oikein.
  • Luettavan, muotoillun JSON-katkelman jakaminen bugi-ilmoituksessa, koodikatselmuksessa tai dokumentaatiossa.
  • JSON-hyötykuorman pienentäminen pienimpään muotoonsa ennen sen upottamista URL-parametriin tai tallentamista kokorajoitettuun tietokantasarakkeeseen.

Miksi käyttää sitä?

Suomi.fi-integraation webhook palautti 500-virheen ja lokiin tallentui yksi pitkä JSON-rivi — liitä se tähän ja näet heti, mikä kenttä puuttui payloadista.

Rakennat asiakkaan tilausrajapintaa ja saat virheen "Unexpected token at position 87" — työkalu näyttää tarkan rivin ja sarakkeen sen sijaan, että joutuisit laskemaan merkkejä käsin.

Lähetät konfiguraation MobilePay-tyyppiseen maksurajapintaan ja haluat pienentää hyötykuorman ennen lähetystä — minifioi se yhdellä klikkauksella.

JSON sisältää henkilötunnuksia tai asiakastietoja etkä voi liittää sitä ulkoiseen palveluun GDPR:n vuoksi — kaikki tapahtuu paikallisesti selaimessasi, mikään ei lähde laitteeltasi.

Katselmoit kollegan pull requestia, jossa testidata on yhtenä minifioituna rivinä — muotoile se ensin, jotta diff näyttää oikeasti mitä muuttui.

Usein kysytyt kysymykset

Ladataanko JSON-dataani palvelimelle?

Ei. Tämä työkalu toimii kokonaan selaimessasi JavaScriptillä. JSON:isi ei koskaan poistu laitteeltasi, mikä tekee sen turvalliseksi arkaluontoisen tai sisäisen datan kanssa.

Miksi JSON:ini on virheellinen?

Yleisimmät syyt ovat: puuttuvat tai ylimääräiset pilkut, avaimet ilman lainausmerkkejä, yksinkertaiset lainausmerkit kaksoislainausmerkkien sijaan, viimeisen kohteen jälkeinen loppupilkku ja kommentit (JSON ei salli kommentteja). Syöttökentän alla oleva virheviesti kertoo, mitä jäsennin löysi.

Mitä eroa on Muotoile- ja Minifioi-toiminnoilla?

Muotoile lisää sisennystä ja rivinvaihtoja tehdäkseen JSON:ista ihmisen luettavan. Minifioi poistaa kaiken tarpeettoman tyhjätilan tehdäkseen JSON:ista mahdollisimman pienen — hyödyllinen ennen lähetystä tai upottamista.

Onko kokorajaa?

Työkalu ei aseta kovaa rajaa. Erittäin suuret tiedostot (kymmeniä megatavuja) voivat olla hitaita laitteestasi riippuen, koska kaikki käsittely tapahtuu paikallisesti selaimessasi.

Voiko tämä korjata rikkinäisen JSON:in automaattisesti?

Ei — työkalu kertoo tarkalleen, missä JSON on rikki, jotta voit korjata sen itse, mutta se ei arvaa tai muuta dataasi. Tämä on tarkoituksellista: datan hiljainen "korjaaminen" voi piilottaa todellisia bugeja.

Tukeeko työkalu JSON5:tä tai JSONC:tä (kommentit, loppupilkut, lainaamattomat avaimet)?

Ei, ja se on tarkoituksellista — tämä työkalu validoi tiukan RFC 8259 -standardin mukaan, jota API:si ja JSON.parse() todellisuudessa vaativat. Jos muotoilet JSONC-konfiguraatiotiedostoa (kuten tsconfig.json), poista kommentit ensin, muuten jäsennin ilmoittaa ne virheiksi.

Miten tämä eroaa selaimen konsolissa ajetusta JSON.stringify-komennosta?

JSON.stringify(JSON.parse(x), null, 2) tekee saman muotoilun, mutta se vaatii avoimen konsolin ja heittää epäselvän yleisvirheen virheellisestä syötteestä, sen sijaan että osoittaisi tarkan rivin ja sarakkeen kuten tämä työkalu.

Toimiiko tämä eri selaimissa, kuten Safarissa tai vanhemmassa Edgessä?

Kyllä. Työkalu käyttää selainten standardia JavaScript-jäsentimiä, jotka ovat identtisiä kaikissa nykyaikaisissa selaimissa (Chrome, Firefox, Safari, Edge) — sama tulos riippumatta laitteesta tai käyttöjärjestelmästä.

Onko tämä eri työkalu kuin tekstieditorien sisäänrakennettu JSON-muotoilu?

Toimintaperiaate on sama, mutta tämä toimii ilman asennuksia missä tahansa selaimessa, näyttää tarkan virhesijainnin ja on käytettävissä myös silloin, kun et ole oman koneesi ääressä — esimerkiksi etätyöpisteellä tai puhelimella.

Mitä tapahtuu, jos liitän vahingossa arkaluontoista dataa, kuten henkilötunnuksia?

Koska kaikki käsittely tapahtuu selaimessasi eikä dataa lähetetä minnekään, riski on sama kuin liittäisit tekstin omaan muistilehtiöösi. Suosittelemme silti aina poistamaan aidot henkilötunnukset ja asiakastiedot ennen jakamista muille, vaikka itse työkalu ei tallenna mitään.

Liittyvät työkalut