SyntaxError: “[object Object]” is not valid JSON: usually happens when the value being passed to JSON.parse is not a string value.
Let’s see how we can fix it.
const object = JSON.parse({ website: "https://wisdomgeek.com" });
// Uncaught SyntaxError: "[object Object]" is not valid JSON
JavaScriptSince the value being passed to JSON.parse is already an object, we don’t need to parse it again. It can simply be a definition of the object.
const object = { website: "https://wisdomgeek.com" };
JavaScriptJSON.stringify
firstThere might be cases where we want to parse an object value. In those cases, to avoid the ‘SyntaxError: “[object Object]” is not valid JSON’ error, we need to convert the object to a string first.
const object = JSON.parse(JSON.stringify({ website: "https://wisdomgeek.com" }));
JavaScriptThe above example is very naive and should not be used. But it can be helpful if there is something else that is happening in between the conversion, like converting the object to a string to store it in local storage and then retrieving it later.
Note: This is also a common technique to create a deep copy of a JavaScript object.
If you are still stuck, you might want to check the type of variable being passed to JSON.parse:
// let us assume this is initialized somewhere else
const object = { website: "https://wisdomgeek.com" };
const parsedObject = JSON.parse(object);
// Uncaught SyntaxError: "[object Object]" is not valid JSON
console.log(typeof object); // 👉️ "object"
// we need to pass a string
JavaScriptThis will also help you if you forgot to wait for a promise to be resolved when fetching JSON from third-party sources.
const response = await fetch("https://dummyjson.com/products/1");
const text = response.text();
const parsedData = JSON.parse(text);
// Uncaught SyntaxError: "[object Object]" is not valid JSON
JavaScriptIf we check the type of jsonData:
console.log(typeof jsonData);
// object
JavaScriptWe can identify the issue and add a promise.then or an await to fix it.
const response = await fetch("https://dummyjson.com/products/1");
const text = await response.text();
const parsedData = JSON.parse(text);
// {id: "1", .... }
JavaScriptIf the value being passed is a string and we still are getting an error, the string might not be a valid JSON:
// let us assume this is initialized somewhere else
const objectString = '{ "https://wisdomgeek.com" }';
const parsedObject = JSON.parse(object);
// Uncaught SyntaxError: Expected ':' after property name in JSON at position 27
JavaScriptIn this case, you need to fix the string being passed into the JSON.parse method. You can use a JSON validator like this one to check if the JSON is valid or not.
While working on a project, I wanted to do an integrity check of a file…
Popovers have been a problem that was typically solved by using a third-party solution. But…
Node.js 20.6 added built-in support for the .env file. This is an excellent addition to the platform…
Object destructuring is a powerful ES 6 feature that can help developers write cleaner code.…
Have you felt particularly annoyed by the time it takes to clone a large repository,…
Within a React or Next.js app, if you encounter the error "Hydration failed because the…