Convert an Object to a JSON in Typescript

avatar

Borislav Hadzhiev

Last updated: Feb 23, 2022

banner

Photo from Unsplash

Convert an Object to a JSON in Typescript #

Use the JSON.stringify() method to convert an object to JSON in TypeScript, e.g. const json = JSON.stringify(obj). The JSON.stringify method takes a value, converts it to a JSON string and returns the result.

index.ts
// 👇️ const obj: {name: string; country: string;} const obj = { name: 'Tom', country: 'Chile' }; // ✅ Convert to JSON // 👇️ const json: string const json = JSON.stringify(obj); // ✅ Parse back to Object // 👇️ const parsed: any const parsed = JSON.parse(json);

We used the JSON.stringify method to convert an object to JSON.

The only parameter we passed to the method is the object.

The JSON.stringify method returns a string containing the JSON representation of the object.

index.ts
// 👇️ const obj: {name: string; country: string;} const obj = { name: 'Tom', country: 'Chile' }; // 👇️ const json: string const json = JSON.stringify(obj); console.log(typeof json); // 👉️ "string"

If you need to convert the JSON string back to an object, use the JSON.parse() method.

If you use the JSON.parse method to parse the JSON back into an object, it will have a type of any.

index.ts
const obj = { name: 'Tom', country: 'Chile' }; // ✅ Convert to JSON // 👇️ const json: string const json = JSON.stringify(obj); // ✅ Parse back to Object // 👇️ const parsed: any const parsed = JSON.parse(json);

You can use a type assertion to change the type from any to the type of the object.

index.ts
// 👇️ const obj: {name: string; country: string;} const obj = { name: 'Tom', country: 'Chile' }; // ✅ Convert to JSON // 👇️ const json: string const json = JSON.stringify(obj); console.log(typeof json); // 👉️ "string" // ✅ Parse back to Object // 👇️ const parsed: {name: string; country: string;} const parsed = JSON.parse(json) as typeof obj;

Now the parsed variable is correctly typed.

Note that undefined, functions and Symbol values are not valid JSON. If your object contains any of them, they would get omitted when converting the object to a JSON string.

index.ts
// 👇️ const obj: {id: symbol; name: undefined; age: () => number;} const obj = { id: Symbol('hello'), name: undefined, age: () => 5, }; // ✅ Convert to JSON // 👇️ const json: string const json = JSON.stringify(obj); console.log(json); // 👉️ {}
None of the key-value pairs of the object got converted to JSON because it only contains JSON incompatible values.

If the object you're converting to a JSON string contains a circular reference, you'd get a TypeError: cyclic object value.

index.ts
const obj: { name: string; country: string; newName?: any } = { name: 'Tom', country: 'Chile', }; obj.newName = obj; // ⛔️ Error: Converting circular structure to JSON const json = JSON.stringify(obj);

Because we assigned the object's property to reference the object, we created a circular reference, which throws an exception when converted to JSON.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.