Veelvoorkomende JSON-syntaxfouten en hoe je ze oplost met een validator

Veelvoorkomende JSON-fouten

De strikte syntaxregels van JSON betekenen dat zelfs één verkeerd geplaatst teken een heel document kan breken. Inzicht in de meest voorkomende JSON-fouten helpt je sneller te debuggen en te voorkomen dat je dezelfde fouten herhaalt. Hieronder staan de meest voorkomende problemen waar ontwikkelaars tegenaan lopen, met duidelijke uitleg en oplossingen voor elk.

1. Afsluitende komma's

Fout: Unexpected token aan het einde van een object of array

Afsluitende komma's zijn toegestaan in JavaScript-objecten en -arrays, maar zijn in JSON strikt verboden.

Ongeldige JSON:

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

Oplossing: Verwijder de komma na het laatste item.

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

Arrays met afsluitende komma's:

// Invalid
[1, 2, 3,]

// Valid
[1, 2, 3]

2. Ontbrekende of onjuiste aanhalingstekens rond sleutels

Fout: Unexpected identifier of Expected double-quoted property name

JSON vereist dat alle object-sleutels tussen dubbele aanhalingstekens staan. Enkele aanhalingstekens en sleutels zonder aanhalingstekens zijn niet geldig, ook al werken ze in JavaScript.

Ongeldige JSON:

{
  name: "Alice",
  'occupation': "Engineer"
}

Oplossing: Zet sleutels altijd tussen dubbele aanhalingstekens.

{
  "name": "Alice",
  "occupation": "Engineer"
}

3. Enkele aanhalingstekens gebruiken voor stringwaarden

Fout: Unexpected identifier of Unterminated string

Net als bij sleutels moeten stringwaarden in JSON dubbele aanhalingstekens gebruiken. Enkele aanhalingstekens zijn niet geldig.

Ongeldige JSON:

{ "greeting": 'Hello, world!' }

Oplossing: Vervang enkele aanhalingstekens door dubbele aanhalingstekens.

{ "greeting": "Hello, world!" }

Tip: Als je string dubbele aanhalingstekens bevat, escape ze dan met een backslash: "He said, \"Hello\"".

4. Niet-escaped speciale tekens

Fout: Unexpected token of Invalid character

Bepaalde tekens moeten in JSON-strings worden geëscaped: dubbele aanhalingstekens ("), backslashes (\) en controletekens.

Ongeldige JSON:

{
  "path": "C:\Users\Documents\file.json",
  "quote": "He said "hello""
}

Oplossing: Escape backslashes en dubbele aanhalingstekens correct.

{
  "path": "C:\\Users\\Documents\\file.json",
  "quote": "He said \"hello\""
}

Volledige lijst van JSON-escape-reeksen

| Reeks | Vertegenwoordigt | |----------|-----------| | \" | Dubbele aanhalingstekens | | \\ | Backslash | | \/ | Slash (forward slash) | | \b | Backspace | | \f | Formfeed | | \n | Nieuwe regel | | \r | Carriage return | | \t | Tab | | \uXXXX | Unicode-teken (bijv. é voor e) |

5. Ongeldige numerieke formaten

Fout: Unexpected number of Invalid number

JSON heeft specifieke regels voor hoe getallen kunnen worden opgemaakt:

• Voorloopnullen zijn niet toegestaan (01 is ongeldig)
• Een enkele voorloopnul is alleen toegestaan voor het getal 0
• Getallen kunnen geen afsluitende punt hebben (10. is ongeldig)
• Hexadecimale, octale en binaire formaten worden niet ondersteund

Ongeldige JSON:

{
  "invalid1": 01,
  "invalid2": 10.,
  "invalid3": 0xFF,
  "invalid4": 1,000
}

Oplossing:

{
  "valid1": 1,
  "valid2": 10.0,
  "valid3": 255,
  "valid4": 1000
}

6. Ongeldige waarden: undefined, NaN, Infinity

Fout: Unexpected token voor undefined, NaN, Infinity

JavaScript heeft waarden die geen JSON-equivalent hebben. Deze veroorzaken parseerfouten:

Ongeldige JSON:

{
  "undefinedVal": undefined,
  "notANumber": NaN,
  "infinity": Infinity
}

Oplossing: Vervang ze door geldige JSON-waarden of gebruik een conventie.

{
  "undefinedVal": null,
  "notANumber": null,
  "infinity": 1.7976931348623157e+308
}

7. Extra komma's of ontbrekende komma's

Fout: Expected comma of Unexpected token

Komma's in JSON moeten elk sleutel/waarde-paar en elk array-element scheiden, maar mogen niet na het laatste item verschijnen.

Ontbrekende komma (ongeldig):

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

Oplossing: Voeg de ontbrekende komma toe.

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

8. Problemen met diep geneste structuren

Fout: Maximum call stack size exceeded of parser-timeout

Hoewel het geen syntaxfout is, kan diep geneste JSON (10+ niveaus) prestatieproblemen veroorzaken en debuggen uiterst moeilijk maken.

Problematische structuur:

{
  "level1": {
    "level2": {
      "level3": {
        "level4": {
          "level5": {
            "level6": {
              "value": "too deep"
            }
          }
        }
      }
    }
  }
}

Betere aanpak: Maak de structuur vlakker of gebruik verwijzingen.

{
  "users": {
    "alice": { "role": "admin" }
  },
  "permissions": {
    "admin": ["read", "write", "delete"]
  }
}

9. Ontbrekende openende of sluitende accolades

Fout: Expected ',' or '}' of Unexpected end of JSON input

Niet-passende accolades en haakjes zijn een veelvoorkomende bron van JSON-fouten, vooral in grote of met de hand geschreven JSON-bestanden.

Ongeldige JSON:

{
  "name": "Alice",
  "items": [1, 2, 3
}

Oplossing: Zorg ervoor dat elke { een bijpassende } heeft en elke [ een bijpassende ].

{
  "name": "Alice",
  "items": [1, 2, 3]
}

Pro-tip: Spring je JSON goed in om openende en sluitende haakjes visueel te matchen. Een JSON-formatter kan dit automatisch doen.

Hoe JSON-fouten effectief te debuggen

1. Gebruik een JSON-validator -- Plak je JSON in een gratis JSON-validator om het exacte regel- en kolomnummer van de eerste fout te krijgen.
2. Valideer stapsgewijs -- Valideer bij grote bestanden één sectie tegelijk om de fout te isoleren.
3. Let op kopieer-en-plak-artefacten -- Onzichtbare tekens, slimme aanhalingstekens en non-breaking spaces sluipen vaak binnen via tekstverwerkers of webpagina's.
4. Controleer de tekencodering -- Zorg ervoor dat je bestand is opgeslagen als UTF-8. Andere coderingen kunnen onzichtbare fouten veroorzaken.
5. Gebruik een linter -- Tools zoals ESLint met de json-plugin vangen JSON-fouten op tijdens de ontwikkeling.

Onthoud: JSON-parsers rapporteren doorgaans alleen de eerste syntaxfout. Los die op, valideer opnieuw en herhaal dit totdat het document slaagt. Onze JSON Formatter & Validator-tool geeft je directe, gedetailleerde foutmeldingen om dit proces te versnellen.