Dlaczego JSON.parse mówi "Unexpected token"?

To diagnostyka Unexpected token w JSON.parse: co oznacza błąd, jak czytać pozycję i co zrobić, gdy ciało to HTML. Przecinek na końcu, cudzysłowy i Unexpected end szerzej opisuje Częste błędy JSON: przecinek na końcu, cudzysłowy i Unexpected token.

Co oznacza “Unexpected token” w JSON.parse()?

JSON.parse() wymaga gramatyki JSON. Niedozwolony znak w bieżącej pozycji zgłasza SyntaxError. {“name”:“Alex”,} jest niepoprawne: po tym przecinku obiekt nie może się skończyć. Treść komunikatu i pozycja nadal zależą od środowiska.

Jaki błąd zgłasza JSON.parse()?

Niepoprawny JSON zwykle zgłasza SyntaxError. Zapisz error.name, aby potwierdzić typ. Nie wklejaj na sztywno całego error.message: silniki i wersje formułują go inaczej.

try {
  JSON.parse('{"name":"Alex",}');
} catch (error) {
  console.log(error.name);
  // SyntaxError
}

1. Pojedyncze cudzysłowy zamiast podwójnych

{‘name’:‘Alex’} to niepoprawny JSON. {“name”:“Alex”} jest poprawny. Łańcuchy JSON i nazwy składowych obiektu używają podwójnych cudzysłowów. Literał obiektu JavaScript taki jak const user = { name: ‘Alex’ } może być legalnym JavaScript i nadal nie być tekstem JSON.

Niepoprawne

{'name':'Alex'}

Poprawne

{"name":"Alex"}

2. Przecinek na końcu

Przecinek po ostatniej właściwości lub ostatnim elemencie tablicy nie jest poprawnym standardowym JSON. {“name”:“Alex”,“age”:30,} i [1, 2, 3,] oba zawodzą. Traktuj to jako jedną przyczynę Unexpected token; Częste błędy JSON: przecinek na końcu, cudzysłowy i Unexpected token omawia przecinek na końcu głębiej.

Niepoprawne

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

Poprawne

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

[1, 2, 3,]

3. Nazwy właściwości bez cudzysłowów

{ name: “Alex” } może być literałem obiektu JavaScript. W JSON nazwy składowych to łańcuchy i potrzebują podwójnych cudzysłowów: {“name”:“Alex”}.

Niepoprawne

{
  name: "Alex"
}

Poprawne

{
  "name": "Alex"
}

4. Niepoprawne escapowanie łańcucha

W tekście JSON ukośnik wsteczny zaczyna sekwencję ucieczki. Surowa ścieżka w stylu C:\Users\Alex jest niepoprawna, bo \U nie jest legalnym escape. Podwój ukośniki wsteczne. Nie mieszaj escapowania języka gospodarza z escapowaniem JSON. Częste błędy JSON: przecinek na końcu, cudzysłowy i Unexpected token omawia to głębiej.

Niepoprawne

{"file":"C:\Users\Alex"}

Poprawne

{"file":"C:\\Users\\Alex"}

5. Dodatkowy tekst przed JSON lub po nim

JSON.parse oczekuje jednej wartości JSON. Prefiks taki jak Success: przed {“ok”:true} albo sufiks taki jak done po nim czyni cały łańcuch niepoprawnym. Nieznaczące białe znaki wokół jednej wartości JSON są dozwolone. JSON nie zabrania spacji przed wartością ani po niej.

Success:
{"ok":true}

{"ok":true}
done

6. Parsowanie HTML zamiast JSON

Wywołanie response.json() na stronie HTML to częsty przypadek Unexpected token. Złe endpointy, strony HTML 404 lub 500, przekierowania logowania, ciała proxy i strony zapasowe często zaczynają się od znaczników. „Unexpected token < always means HTML” jest zbyt mocne: < to wskazówka, nie dowód.

fetch('/api/data')
  .then(response => response.json())

Co zwykle oznacza “Unexpected token <”?

Wartości JSON zwykle nie zaczynają się od <. Jeśli ciało zaczyna się od lub , < może być pierwszym niedozwolonym znakiem. Przy lokalnym debugowaniu sprawdź status HTTP, Content-Type i surowe ciało. Brzmienie silnika nadal bywa różne.

Sprawdź odpowiedź, zanim ją sparsujesz

Ciało fetch można skonsumować tylko raz. Przy lokalnym debugowaniu najpierw odczytaj text(), obejrzyj krótki prefiks, potem JSON.parse na tym samym łańcuchu. Nie wywołuj response.json(), a potem response.text() na tej samej odpowiedzi. Domyślnie nie loguj wrażliwych ładunków produkcyjnych.

const response = await fetch(url);
const text = await response.text();

console.log(response.status);
console.log(response.headers.get("content-type"));
console.log(text.slice(0, 200));

try {
  const data = JSON.parse(text);
  console.log(data);
} catch (error) {
  console.error("Invalid JSON:", error);
}

Co oznacza “at position 123”?

Niektóre silniki podają pozycję, wiersz lub kolumnę. Szukaj w pobliżu złego cudzysłowu, przecinka, nawiasu albo escape. Ten indeks to miejsce, w którym parsowanie zauważyło problem; prawdziwa przyczyna może być wcześniej. To nie jest gwarancja dokładnego wadliwego znaku.

Unexpected token a Unexpected end

Unexpected token oznacza, że parser natrafił na znak, którego nie oczekiwał. Unexpected end może pojawić się, gdy wejście kończy się, zanim wartość będzie kompletna, jak w {“name”:“Alex” bez zamykającego nawiasu. Dokładne brzmienie zależy od silnika. Częste błędy JSON: przecinek na końcu, cudzysłowy i Unexpected token szerzej omawia niekompletny JSON.

{"name":"Alex"

JSON to nie to samo co literał obiektu JavaScript

JSON jest formatem danych. Literał obiektu JavaScript to składnia JavaScript. Obiekt JS z kluczami bez cudzysłowów, pojedynczymi cudzysłowami i przecinkiem na końcu nie jest poprawnym tekstem JSON. JSON.parse nie potrafi bezpiecznie sparsować literałów obiektów JavaScript.

const data = {
  name: 'Alex',
  active: true,
};

{
  "name": "Alex",
  "active": true
}

Czy JSON może zawierać komentarze?

Standardowy JSON nie obsługuje komentarzy. Linia // wewnątrz obiektu jest niepoprawna. JSON5 i podobne rozszerzenia to inne formaty. Formatowanie i porównywanie JSON sprawdza standardowy JSON przez JSON.parse i nie traktuje JSON5 jako JSON.

{
  // user name
  "name": "Alex"
}

Czy undefined, NaN i Infinity to poprawny JSON?

Nie. Wartości JSON to obiekt, tablica, łańcuch, liczba, true, false i null. undefined, NaN i Infinity nimi nie są. Wartość najwyższego poziomu nie musi być obiektem ani tablicą: true, 123, “hello” i null są poprawnym JSON.

{"a":undefined}
{"a":NaN}
{"a":Infinity}

true
123
"hello"
null

Jak naprawić błąd Unexpected token krok po kroku

Pracuj na źródle, nie na łańcuchu błędu:

1. Potwierdź, że wejście to naprawdę JSON, a nie HTML, logi ani JavaScript.
2. Sprawdź pierwsze znaki surowego wejścia.
3. Jeśli pochodzi z API, sprawdź status HTTP i Content-Type. Ani 200, ani application/json nie gwarantują poprawnego JSON.
4. Zweryfikuj składnię w parserze JSON.
5. Użyj zgłoszonej pozycji, wiersza lub kolumny jako wskazówki, nie jako gwarantowanej przyczyny źródłowej.
6. Sprawdź cudzysłowy, przecinki, nawiasy klamrowe, kwadratowe i escape w pobliżu.
7. Porównaj ze sformatowaną, zweryfikowaną kopią.
8. Napraw serializer lub endpoint. Nie usuwaj zgłoszonego tokenu na chybił trafił.

Używaj JSON.stringify(), gdy tworzysz JSON w JavaScript

Preferuj JSON.stringify zamiast ręcznego sklejania łańcuchów. Emituje poprawny tekst JSON dla wartości, które serializuje. Nie zachowuje każdej wartości JavaScript: undefined, funkcje i symbole mają szczególne zachowanie. Ten szczegół wykracza tu poza zakres.

const data = {
  name: "Alex",
  active: true
};
const json = JSON.stringify(data);
// {"name":"Alex","active":true}

Niepoprawny JSON a prawdziwa poprawka

Te pary sprawdzono przez JSON.parse. Przy HTML poprawką jest odpowiedź, nie edycja składni.

Problem	Niepoprawne	Poprawka
Pojedyncze cudzysłowy	{'a':1}	{"a":1}
Przecinek na końcu	{"a":1,}	{"a":1}
Klucz bez cudzysłowów	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
Ciało HTML	<html>...	Sprawdź endpoint i surową odpowiedź. Nie edytuj HTML na JSON.

Prosty przewodnik decyzyjny dla Unexpected token

Jeśli JSON.parse zawiódł, najpierw ustal, czy w ogóle masz JSON, zanim przepiszesz cudzysłowy.

• JSON.parse zawiódł
• ↓
• Z API? Sprawdź status, Content-Type i surowe ciało
• Zaczyna się jak JSON? Jeśli nie, napraw źródło lub endpoint
• Jeśli tak, sprawdź cudzysłowy, przecinki, nawiasy, escape, nieobsługiwane wartości
• Użyj zgłoszonej pozycji jako wskazówki
• ↓
• Napraw źródło, potem parsuj ponownie

Sprawdź JSON, zanim go sparsujesz lub użyjesz

NEXNARA Formatowanie i porównywanie JSON sprawdza JSON w przeglądarce przez JSON.parse—nie eval.

Walidacja, ładne formatowanie z 2 spacjami, 4 spacjami lub tabulacjami, minifikacja, kopiowanie, pobieranie i wgrywanie .json. JSON Diff obejmuje zagnieżdżone obiekty i tablice, ścieżki, podsumowanie, filtry i zamianę. Po sparsowaniu ładna i zminifikowana kopia tych samych danych porównuje się jako równa; klucze obiektów porównuje się po nazwie.

Tekst większy niż 5 MB może działać wolno. Tekst większy niż 15 MB nie jest przetwarzany w przeglądarce.

Walidacja i formatowanie JSON odbywają się w Twojej przeglądarce. To narzędzie nie wysyła JSON na serwer NEXNARA. Reklamy i inne funkcje witryny nadal korzystają z sieci.

Wklej nieudany łańcuch do Formatowanie i porównywanie JSON i przeczytaj pierwsze znaki, zanim przepiszesz cudzysłowy.

FAQ

Dlaczego JSON.parse mówi Unexpected token?

Tekst nie jest poprawnym JSON w punkcie, w którym parser się zatrzymał. Typowe przyczyny: cudzysłowy, przecinki, dodatkowy tekst albo ciało nie-JSON, na przykład HTML.

Co oznacza Unexpected token < in JSON?

Pierwszym niedozwolonym znakiem może być <. To często wskazuje na stronę HTML, ale nie jest dowodem 404 ani HTML w każdym przypadku. Sprawdź status, Content-Type i surowe ciało.

Jak znaleźć pozycję błędu w JSON?

Jeśli silnik podaje pozycję, wiersz lub kolumnę, spójrz w pobliże. Prawdziwy błąd może być wcześniej. Traktuj to jako wskazówkę, potem zweryfikuj.

Czy JSON może używać pojedynczych cudzysłowów?

Nie. W standardowym JSON łańcuchy i nazwy składowych używają podwójnych cudzysłowów.

Czy JSON może mieć przecinek na końcu?

Nie. Standardowy JSON nie zezwala na przecinek po ostatniej właściwości ani ostatnim elemencie tablicy.

Jak sprawdzić, czy łańcuch to poprawny JSON?

Wywołaj JSON.parse w try/catch albo wklej tekst do Formatowanie i porównywanie JSON. Jeśli parsowanie zgłosi SyntaxError, łańcuch nie jest poprawnym JSON.