Så här åtgärdar du SyntaxError: Unexpected token < in JSON at position 0

Felet SyntaxError: Unexpected token < in JSON at position 0 indikerar att JavaScript-koden tog emot icke-JSON-data, vanligtvis HTML, istället för den förväntade JSON-koden. För att åtgärda problemet, undersök mottagen data för att fastställa problemet. Om du använder fetch() eller JSON.parse(), logga data till konsolen och leta efter vanliga problem som felaktiga webbadresser, serverfel eller problem med variabeltilldelning och teckenkodning.

Den här guiden hjälper dig att fixa SyntaxError: Unexpected token < in JSON at position 0. Den här guiden gäller även andra vanliga varianter av samma fel:

Sammanfattning

De här felen indikerar att JavaScript-koden förväntade sig att ta emot JSON men i stället fick något annat (antagligen HTML i form av ett fel på serversidan). För att fixa det här behöver du avgöra vad problemet är genom att undersöka vad du fick i stället för förväntad JSON.

Uppgifter

Oftast uppstår felet när servern returnerar HTML-kod (som vanligtvis börjar med <DOCTYPE html> eller <html>) istället för JSON. Giltig JSON-kod kan inte börja med ett <-tecken, så JSON-parsern vet omedelbart att datan inte är giltig JSON-kod och producerar ett av felen ovan.

För att fixa problemet behöver du ta reda på varför du får HTML-kod (eller någon annan) i stället för förväntad JSON. Du behöver därför logga de data du försöker parsa i konsolen.

Om du använder fetch()

Använd den här metoden om koden ser ut ungefär så här:

fetch('https://example.com/some/path/to/json')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    // Do something with data
});

I det här fallet uppstår felet när response.json() försöker att köra och misslyckas med att parsa data från servern som JSON. Du kan lägga till en funktion för att hantera felet och visa textinnehållet i svarstexten från servern och logga det i konsolen (se informationen om kommenterade rader nedan):

var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
    responseClone = response.clone(); // 2
    return response.json();
})
.then(function (data) {
    // Do something with data
}, function (rejectionReason) { // 3
    console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
    responseClone.text() // 5
    .then(function (bodyText) {
        console.log('Received the following instead of valid JSON:', bodyText); // 6
    });
});

Här är en förklaring till varje rad med en numrerad kommentar:

  1. En responseClone-variabel krävs för att bevara en klon av response-objektet eftersom texten i ett response bara kan läsas en gång. När response.json() anropas läses texten i ursprungligt response, vilket betyder att den inte kan läsas igen när JSON-parsningsfelet hanteras. När response klonas till responseClone skapas två kopior av svarstexten att arbeta med: en i ursprungligt response att använda med response.json() och en annan att använda med responseClone.text() om response.json() misslyckas.
  2. Den här raden uppdaterar responseClone-variabeln med en klon av svaret som tagits emot från servern.
  3. Ett andra funktionsargument skickas till then()-funktionen som följer response.json()-anropet. Den andra funktionen anropas om löftet från response.json() avvisas (dvs. ett JSON-fel påträffas).
  4. I den här raden loggas rejectionReason från det avvisade response.json()-löftet och responseClone så att det kan undersökas vid behov (HTTP-statuskoden är ofta bra att använda för felsökning, till exempel).
  5. I stället för att försöka parsa svarstexten från servern som JSON behandlas den som textinnehåll.
  6. Svarstexten loggas i konsolen för undersökning.

Om du använder JSON.parse()

Använd den här metoden om koden som leder till fel ser ut så här:

JSON.parse(data);

I det här fallet kan du logga datan i konsolen om ett fel påträffas för att se vad det innehåller:

try {
    JSON.parse(data);
}
catch (error) {
    console.log('Error parsing JSON:', error, data);
}

Vad gör jag sedan?

När du kan se de data som skapar JSON-parsningsfelet ger det dig förhoppningsvis en ledtråd till varför du inte får den giltiga JSON som du förväntar dig. Några av de vanligaste problemen som leder till det här felet är: