The JSON.parse() function in JavaScript is used to convert a JSON string into a JavaScript object. Sometimes, it fails and throws an error. Here are the main reasons for this, along with solutions for each one.

1. Invalid JSON Format

This error occurs if the property names in the JSON string are not enclosed in double-quotes. JSON requires that all property names use double quotes; otherwise, JSON.parse() will throw an error.

Example:


const jsonString = '{name: "Testuser}'; // This will throw an error
JSON.parse(jsonString);

Fix: Add double quotes around the property name:

const jsonString = '{"name": "Testuser"}'; // Correct format
const obj = JSON.parse(jsonString); // Works fine
console.log(obj)

2. Unexpected End of Input
This error occurs if the JSON string is incomplete. For example, if it’s missing a closing bracket.

Example:
const jsonString = '{"name": "Testuser"'; // Missing closing bracket}
JSON.parse(jsonString);

Fix: Make sure the JSON string is complete and properly closed:

const jsonString = '{"name": "Testuser"}'; // Correct format
const obj = JSON.parse(jsonString); // Works fine
console.log(obj);

3. Using Single Quotes Instead of Double Quotes

JSON requires double quotes around strings. Using single quotes will cause JSON.parse to fail.

Example:

const jsonString = "{'name': 'Testuser'}"; // Using single quotes
JSON.parse(jsonString);

Fix: Use double quotes instead:

const jsonString = '{"name": "Testuser"}'; // Correct format
const obj = JSON.parse(jsonString); // Works fine
console.log(obj);

4. Trailing Commas
Adding a comma after the last item in an object or array causes an error.

Example:
const jsonString = '{"name": "Testuser",}'; // Trailing comma
JSON.parse(jsonString);

Fix: Remove the trailing comma:

const jsonString = '{"name": "Testuser"}'; // Correct format
const obj = JSON.parse(jsonString); // Works fine
console.log(obj);

5. Unexpected Characters

If the JSON string contains unexpected characters (like HTML tags or invalid symbols), ‘JSON.parse()’ will fail. This often happens when a server returns an HTML error page instead of JSON.

Example:

const jsonString = '

Error 404: Not Found

‘; // HTML instead of JSON
JSON.parse(jsonString); // Throws an error

Fix: Check the response type before parsing it as JSON. For example, using ‘fetch’, verify the ‘Content-Type’ header to ensure it’s ‘application/json’.

fetch('/api/data')
.then(response => {
if (response.headers.get('content-type').includes('application/json')) {
return response.json(); // Safe to parse as JSON
} else {
throw new Error('Expected JSON, received something else');
}
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

6. Parsing Non-String Data

‘JSON.parse()’ only works on strings. Attempting to parse non-string data, like objects or numbers, will throw an error.

Example
const data = { "name": "Test" };
JSON.parse(data); // Throws an error because `data` is already an object

Fix: Use ‘JSON.stringify()’ if you need to convert an object into a JSON string, and only use ‘JSON.parse() on string data.

const jsonString = JSON.stringify({ "name": "Test" });
const parsedData = JSON.parse(jsonString);
console.log(parsedData); // { name: "Test" }

By following these solutions, you can avoid common issues with ‘JSON.parse()’ and ensure your code runs smoothly.