Διορθώστε το "Unexpected token" στο JSON.parse: οδηγός για κάθε αιτία

Το SyntaxError: Unexpected token X in JSON at position N είναι από τα πιο συχνά σφάλματα στη JavaScript, και από τα λιγότερο χρήσιμα — σας λέει πού τα παράτησε ο parser, όχι γιατί. Δείτε πώς να το διορθώσετε στα αλήθεια.

Βήμα 1: διαβάστε τον αριθμό θέσης

Το JSON.parse μετρά χαρακτήρες από την αρχή του string, ξεκινώντας από το 0. Αν το JSON σας ήρθε από μεταβλητή, καταγράψτε το ακριβές κομμάτι γύρω από αυτή τη θέση πριν κάνετε οτιδήποτε άλλο:

try {
  JSON.parse(raw);
} catch (e) {
  const match = e.message.match(/position (\d+)/);
  if (match) {
    const pos = Number(match[1]);
    console.log(raw.slice(Math.max(0, pos - 20), pos + 20));
  }
}

Αυτό το ένα snippet λύνει περισσότερα τέτοια σφάλματα από κάθε συμβουλή για τη σύνταξη του JSON, γιατί τα περισσότερα σφάλματα «unexpected token» είναι στην πραγματικότητα σφάλματα «δεν ξέρω τι περιέχει πραγματικά το string μου» — κενά στο τέλος από copy-paste, μια επιπλέον αλλαγή γραμμής από template literal, ή ένα byte-order-mark (BOM) στην αρχή (θέση 0, token , που είναι αόρατο στους περισσότερους editors).

Οι 7 αιτίες, με σειρά συχνότητας εμφάνισης

Κόμμα στο τέλος. {"a": 1, "b": 2,} — έγκυρο σε JS object literals, άκυρο σε JSON. Το κόμμα πριν από } ή ] είναι η πιο συχνή αιτία όλων.
Μονά εισαγωγικά αντί για διπλά. Το {'a': 1} είναι JS, όχι JSON. Το JSON απαιτεί διπλά εισαγωγικά τόσο στα κλειδιά όσο και στις τιμές string, χωρίς εξαιρέσεις.
Κλειδιά χωρίς εισαγωγικά. {a: 1} — και πάλι, έγκυρη JS, άκυρο JSON. Κάθε κλειδί χρειάζεται εισαγωγικά.
Μια τιμή JS που δεν είναι έγκυρο JSON. undefined, NaN, μια συνάρτηση, ή ένα σχόλιο (// like this) — τίποτα από αυτά δεν υπάρχει στην προδιαγραφή JSON, μόνο στη JavaScript.
Διπλή κωδικοποίηση. Καλέσατε το JSON.stringify() δύο φορές, ή κάνετε parse ένα string που είναι ήδη αντικείμενο — ελέγξτε με typeof raw === 'string' πριν καλέσετε το .parse().
Κενό string ή απόκριση undefined. Αν ένα fetch απέτυχε σιωπηλά ή επέστρεψε κενό σώμα, το JSON.parse("") πετάει Unexpected end of JSON input, ένα διαφορετικό αλλά συγγενές σφάλμα — ελέγξτε το response.ok και καταγράψτε το ακατέργαστο σώμα πριν το parsing.
BOM ή αόρατοι χαρακτήρες από copy-paste. Η επικόλληση JSON από PDF, έγγραφο Word ή κάποια έξοδο τερματικού μπορεί να κουβαλά ένα BOM ή ένα non-breaking space που μοιάζει πανομοιότυπο με κανονικό χαρακτήρα.

Η γρηγορότερη λύση: επικυρώστε πριν κάνετε debug

Το να διαβάζετε ωμά μηνύματα σφάλματος χαρακτήρα-χαρακτήρα είναι αργό. Επικολλήστε το ακριβές string σε έναν formatter που επισημαίνει απευθείας τον άκυρο χαρακτήρα αντί να μαντεύετε από έναν αριθμό θέσης — μετατρέπει το «κάπου κοντά στον χαρακτήρα 812» σε «αυτή η συγκεκριμένη αγκύλη που λείπει, ακριβώς εδώ». (Σύνδεσμος παρακάτω.)

Όταν το JSON είναι όντως έγκυρο αλλά εξακολουθεί να αποτυγχάνει

Αν ένας formatter επιβεβαιώνει ότι το JSON σας είναι συντακτικά σωστό και το JSON.parse εξακολουθεί να πετά σφάλμα, το string που περνάτε δεν είναι το string που νομίζετε. Ο πιο συχνός λόγος: καλείτε το .parse() σε ένα αντικείμενο Response αντί για το επιλυμένο σώμα του.

// Wrong — parses "[object Response]", not the body
const data = JSON.parse(await fetch(url));

// Right
const data = await (await fetch(url)).json();
// or, if you need the raw text first:
const text = await (await fetch(url)).text();
const data = JSON.parse(text);

Γρήγορη αναφορά

Σύμπτωμα	Πιθανή αιτία
`Unexpected token }`	Κόμμα στο τέλος πριν το κλείσιμο του άγκιστρου
`Unexpected token '`	Μονά εισαγωγικά αντί για διπλά
`Unexpected token a` (ή οποιοδήποτε γράμμα)	Κλειδί αντικειμένου χωρίς εισαγωγικά
`Unexpected end of JSON input`	Κενό string, κομμένη απόκριση, ή αγκύλη που δεν έκλεισε
`Unexpected token` (θέση 0)	Byte-order-mark από αρχείο που επικολλήθηκε ή αποθηκεύτηκε στα Windows

Τίποτα από αυτά δεν απαιτεί απομνημόνευση — η λύση είναι πάντα τα ίδια τρία βήματα: καταγράψτε το κομμάτι γύρω από την αναφερόμενη θέση, περάστε το από έναν formatter, διορθώστε τον έναν χαρακτήρα που επισημαίνει.