How to convert an Object to a JSON string in Typescript

avatar
Borislav Hadzhiev

Last updated: Feb 27, 2024
2 min

banner

# Convert an Object to a JSON string in Typescript

Use the JSON.stringify() method to convert an object to JSON in TypeScript.

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: 'Bobby', 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);

convert object to json string in-typescript

The code for this article is available on GitHub

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: 'Bobby', country: 'Chile' }; // ๐Ÿ‘‡๏ธ const json: string const json = JSON.stringify(obj); console.log(typeof json); // ๐Ÿ‘‰๏ธ "string"

# Converting the JSON string back to an object

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 string back into an object, it will have a type of any.

index.ts
const obj = { name: 'Bobby', 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);

converting the json string back to an object

The code for this article is available on GitHub

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: 'Bobby', 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.

# Beware of values that don't get converted to JSON

Note that undefined, functions and Symbol values are not valid JSON.

If your object contains any of them, they will 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); // ๐Ÿ‘‰๏ธ {}

values that dont get converted to json

The code for this article is available on GitHub
None of the key-value pairs of the object got converted to JSON because it only contains JSON incompatible values.

# Avoid circular references

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: 'Bobby', country: 'Chile', }; obj.newName = obj; // โ›”๏ธ Error: Converting circular structure to JSON const json = JSON.stringify(obj);
The code for this article is available on GitHub

We assigned the object's property to a reference to the object, so we created a circular reference.

This is not allowed and causes an exception when the object is converted to JSON.

I've also written an article on how to convert an object to an array.

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.

Copyright ยฉ 2024 Borislav Hadzhiev