How to convert a Set to JSON in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 4, 2024
3 min

banner

# Table of Contents

  1. Convert a Set to JSON in JavaScript
  2. Convert a Set to JSON using spread syntax (...)
  3. Convert a JSON string to a Set in JavaScript
  4. Convert an Object with Set values to JSON

# Convert a Set to JSON in JavaScript

To convert a Set to JSON:

  1. Use the Array.from() method to convert the Set to an array.
  2. Use the JSON.stringify() method to convert the array to JSON.
index.js
const set1 = new Set(['a', 'b', 'c']); const json = JSON.stringify(Array.from(set1)); console.log(json); // ๐Ÿ‘‰๏ธ '["a", "b", "c"]' console.log(typeof json); // ๐Ÿ‘‰๏ธ "string"

convert set to json in javascript

The code for this article is available on GitHub

The Array.from() method creates a new, shallow-copied array from the provided iterable.

index.js
const set1 = new Set(['a', 'b', 'c']); console.log(Array.from(set1)); // ๐Ÿ‘‰๏ธ ['a', 'b', 'c']
We had to convert the Set to an array because Set objects don't have native support for serialization or parsing.

The last step is to use the JSON.stringify() method to convert the array to JSON.

index.js
const set1 = new Set(['a', 'b', 'c']); const json = JSON.stringify(Array.from(set1)); console.log(json); // ๐Ÿ‘‰๏ธ '["a", "b", "c"]'
The code for this article is available on GitHub

The JSON.stringify() method converts a JavaScript value to a JSON string.

If you have to do this often, define a reusable function.

index.js
function setToJSON(set) { return JSON.stringify(Array.from(set)); } const set1 = new Set(['a', 'b', 'c']); // ๐Ÿ‘‡๏ธ '["a","b","c"]' console.log(setToJSON(set1));

defining reusable function

The setToJSON function takes a Set object as a parameter, converts it to JSON and returns the result.

# Convert a Set to JSON using spread syntax (...)

This is a two-step process:

  1. Use the spread syntax (...) to convert the Set to an array.
  2. Use the JSON.stringify() method to convert the array to JSON.
index.js
const set1 = new Set(['a', 'b', 'c']); const json = JSON.stringify([...set1]); console.log(json); // ๐Ÿ‘‰๏ธ '["a", "b", "c"]'

convert set to json using spread syntax

The code for this article is available on GitHub

We used the spread syntax (...) to unpack the values of the Set into an array.

This is equivalent to using the Array.from method, however, in some scenarios, the spread syntax (...) doesn't play nice with TypeScript.

You can define a reusable function if you have to do this often.

index.js
function setToJSON(set) { return JSON.stringify([...set]); } const set1 = new Set(['a', 'b', 'c']); // ๐Ÿ‘‡๏ธ '["a","b","c"]' console.log(setToJSON(set1));

# Convert a JSON string to a Set in JavaScript

If you need to convert the JSON string to a Set, you have to:

  1. Use the JSON.parse() method to parse the JSON string to an array.
  2. Pass the array to the Set() constructor.
index.js
const set1 = new Set(['a', 'b', 'c']); const json1 = JSON.stringify(Array.from(set1)); console.log(json1); // ๐Ÿ‘‰๏ธ '["a", "b", "c"]' // โœ… Parse back to Set const parsed = new Set(JSON.parse(json1)); console.log(parsed); // ๐Ÿ‘‰๏ธ {'a', 'b', 'c'}

convert json string to set

The code for this article is available on GitHub

The Set constructor takes an iterable, such as an array, as a parameter, so we can pass it the result of calling the JSON.parse() method.

The JSON.parse() method parses a JSON string into a JavaScript value.

# Convert an Object with Set values to JSON

If you need to convert an object with Set values to JSON, pass a replacer function to the JSON.stringify() method.

index.js
const obj = { numbers: new Set([1, 2]), colors: new Set(['red', 'green']), }; const json = JSON.stringify(obj, (_key, value) => { return value instanceof Set ? [...value] : value; }); // ๐Ÿ‘‡๏ธ {"numbers":[1,2],"colors":["red","green"]} console.log(json);

convert object with set values to json

The code for this article is available on GitHub

The replacer function is used to alter the behavior of the stringification process.

The function gets called with each key and value of the object.

On each iteration, we check if the current value is a Set object and if it is, we convert it to an array using the spread syntax (...).

I've also written an article on how to convert a Map to JSON in JavaScript.

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