JSON.parse unexpected token - How to Fix (2026)

What is JSON.parse Error?

The error SyntaxError: Unexpected token in JSON occurs when JSON.parse() receives invalid JSON data. JSON must follow strict formatting rules, and any deviation causes this error.

Error Message:
SyntaxError: Unexpected token o in JSON at position 1
SyntaxError: JSON.parse: unexpected character at line 1 column 1

Common Causes

Parsing non-JSON string (HTML, plain text, etc.)
Single quotes instead of double quotes
Trailing commas in JSON
Undefined or function values in JSON
Parsing already-parsed object

Quick Fix (TL;DR)

Quick Solution

// ❌ Problem - Invalid JSON
JSON.parse("{'name': 'John'}"); // Single quotes - Error!

// ✅ Solution - Valid JSON with double quotes
JSON.parse('{"name": "John"}'); // Works!

// ✅ Solution - Use try-catch
try {
    const data = JSON.parse(jsonString);
    console.log(data);
} catch (error) {
    console.error('Invalid JSON:', error);
}

Common Scenarios & Solutions

Scenario 1: Single Quotes Instead of Double Quotes

JSON requires double quotes for strings. Single quotes are not valid JSON.

Problem

// Invalid JSON - single quotes
const jsonString = "{'name': 'John', 'age': 30}";
JSON.parse(jsonString); // SyntaxError!

// Also invalid - unquoted keys
const jsonString2 = "{name: 'John'}";
JSON.parse(jsonString2); // SyntaxError!

Solution

// Valid JSON - double quotes for both keys and values
const jsonString = '{"name": "John", "age": 30}';
const data = JSON.parse(jsonString);
console.log(data); // { name: 'John', age: 30 }

// Or use template literals with double quotes inside
const jsonString2 = `{"name": "John", "age": 30}`;
const data2 = JSON.parse(jsonString2);

Scenario 2: Parsing Already-Parsed Object

Trying to parse an object that's already a JavaScript object, not a JSON string.

Problem

// Already a JavaScript object
const user = { name: 'John', age: 30 };
JSON.parse(user); // SyntaxError: Unexpected token o in JSON

// Or from API that already returns object
fetch('/api/user')
    .then(res => res.json()) // Already parsed here
    .then(data => {
        const parsed = JSON.parse(data); // Error! Already an object
    });

Solution

// Don't parse if already an object
const user = { name: 'John', age: 30 };
console.log(user); // Use directly

// Check type before parsing
function safeParse(data) {
    if (typeof data === 'string') {
        return JSON.parse(data);
    }
    return data; // Already an object
}

// With fetch, don't double-parse
fetch('/api/user')
    .then(res => res.json()) // Parse once
    .then(data => {
        console.log(data); // Use directly, don't parse again
    });

Scenario 3: Trailing Commas

JSON doesn't allow trailing commas, unlike JavaScript objects.

Problem

// Trailing comma in object
const jsonString = '{"name": "John", "age": 30,}';
JSON.parse(jsonString); // SyntaxError!

// Trailing comma in array
const jsonString2 = '["apple", "banana", "orange",]';
JSON.parse(jsonString2); // SyntaxError!

Solution

// Remove trailing commas
const jsonString = '{"name": "John", "age": 30}'; // No trailing comma
JSON.parse(jsonString); // Works!

const jsonString2 = '["apple", "banana", "orange"]'; // No trailing comma
JSON.parse(jsonString2); // Works!

// Or clean the string before parsing
function cleanJSON(str) {
    return str.replace(/,(\s*[}\]])/g, '$1'); // Remove trailing commas
}

const dirty = '{"name": "John",}';
const clean = cleanJSON(dirty);
JSON.parse(clean); // Works!

Scenario 4: Parsing HTML or Plain Text

Trying to parse non-JSON content like HTML error pages or plain text.

Problem

// API returns HTML error page instead of JSON
fetch('/api/user')
    .then(res => res.json()) // Tries to parse HTML as JSON
    .then(data => console.log(data))
    .catch(err => console.error(err)); // SyntaxError!

// Or plain text response
const response = "User not found";
JSON.parse(response); // SyntaxError!

Solution

// Check content type before parsing
fetch('/api/user')
    .then(res => {
        const contentType = res.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
            return res.json();
        } else {
            return res.text(); // Get as text instead
        }
    })
    .then(data => console.log(data))
    .catch(err => console.error(err));

// Or check if response is OK
fetch('/api/user')
    .then(res => {
        if (!res.ok) {
            throw new Error(`HTTP error! status: ${res.status}`);
        }
        return res.json();
    })
    .then(data => console.log(data))
    .catch(err => console.error(err));

// Use try-catch for manual parsing
function safeParse(str) {
    try {
        return JSON.parse(str);
    } catch (error) {
        console.error('Not valid JSON:', str);
        return null;
    }
}

Scenario 5: Undefined or Function Values

JSON doesn't support undefined, functions, or other JavaScript-specific types.

Problem

// Trying to stringify and parse undefined
const obj = { name: 'John', age: undefined };
const jsonString = JSON.stringify(obj); // '{"name":"John"}' - age is omitted
console.log(jsonString);

// Function in object
const obj2 = { 
    name: 'John', 
    greet: function() { return 'Hello'; }
};
const jsonString2 = JSON.stringify(obj2); // '{"name":"John"}' - function omitted

Solution

// Use null instead of undefined
const obj = { name: 'John', age: null };
const jsonString = JSON.stringify(obj);
const parsed = JSON.parse(jsonString); // Works!

// Remove undefined values before stringifying
function cleanObject(obj) {
    return Object.fromEntries(
        Object.entries(obj).filter(([_, v]) => v !== undefined)
    );
}

const obj2 = { name: 'John', age: undefined, city: 'NYC' };
const clean = cleanObject(obj2);
const jsonString2 = JSON.stringify(clean); // '{"name":"John","city":"NYC"}'

// Use replacer function
const obj3 = { name: 'John', age: undefined };
const jsonString3 = JSON.stringify(obj3, (key, value) => {
    return value === undefined ? null : value;
});