An easy fix for "[object Object]" is not valid JSON

If you are using JSON.parse() and have run into the Uncaught SyntaxError: "[object Object]" is not valid JSON error, you're not alone! This error pops up from time to time and is usually because you're not giving JSON.parse() a JSON string.

So let's see how we can fix that!

The easiest fix - you don't need JSON.parse()!

Often this error happens because you are giving JSON.parse() a JavaScript object.

JSON.parse()'s job is to turn JSON back into JavaScript, so if you already have the JavaScript, you don't need JSON.parse()!

For example, this could happen where you were expecting to get JSON back from a server response, but it's already been converted to JavaScript* before reaching your code.

Here's a simple example of how removing JSON.parse() gets rid of the error.

// ❌ ERROR!
const obj = JSON.parse({ name: "my object" });
// Error: "[object Object]" is not valid JSON

// ✅ WORKS!
const obj = { name: "my object" };

*Some libraries will automatically parse JSON back to JavaScript for you. For example, Axios does this in the browser and Express query parser will do this on the server too.

The most common mistake - JSON.parse() instead of JSON.stringify()

If you're giving JSON.parse() an object, maybe you meant to use JSON.stringify() instead?

• JSON.parse() turns JSON into JavaScript
• JSON.stringify() turns JavaScript into JSON

So if you were trying to turn your JavaScript object into JSON, use JSON.stringify().

Turn the object into JSON with JSON.stringify()

If you really do want to use JSON.parse(), you need to give it some valid JSON. You can turn an object into JSON with JSON.stringify() and get rid of the error that way too.

Here's an example, but I really wouldn't do this since all we are doing is turning the object into JSON and back to an object, which seems pretty, pointless.

// 🤷‍♀️
const obj = JSON.parse(JSON.stringify({ name: "my object" }));

This may be useful if something else happens in between the conversion. For example, you turn the object into a JSON string for localStorage, and then need to retrieve it and turn it back into an object at a later time.

JSON.stringify() turns JavaScript into a valid JSON string, and you can also do this manually like in the example below.

const obj = JSON.parse(`{ "name": "my object" }`);

Troubleshooting

Still stuck? Here's how I would troubleshoot this issue in my code:

1. Check if what you are passing to JSON.parse() is a string

// ❌ ERROR!
const result = { name: "my object" };
console.log(typeof result);
// "object" ❌
const obj = JSON.parse(result);
// Error: "[object Object]" is not valid JSON

// ✅ WORKS!
const result = `{ "name": "my object" }`;
console.log(typeof result);
// "string" ✅
const obj = JSON.parse(result);

2. Check the string is valid JSON

Chances are, if you get this error, it's because you are passing an object to JSON.parse(). If you are passing a string and it's not valid JSON, you're more likely to get an error like:

Error: Expected property name or '}' in JSON at position 2

Nonetheless, double check your JSON is valid.

// ❌ ERROR!
const result = "{ hfkdshfd }";
console.log(typeof result);
// "string" ✅
const obj = JSON.parse(result); // ❌
// Error: Expected property name or '}' in JSON at position 2

3. Check if you need to await the result

Maybe you are getting valid JSON, but you are just calling JSON.parse() too soon.

This can happen when using the FetchAPI, for example.

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = response.json(); // ❌ no await
  console.log(jsonData);
};

Make sure you await the response too.

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = await response.json(); // ✅ await
  console.log(jsonData);
};