Christian Heilmann

Reminder: JSON.stringify can create Multi-line, formatted and filtered strings from JSON

Friday, October 28th, 2022 at 7:11 am

demo output of the examples shown here in the browser console

You can use `JSON.stringify()` to turn a JSON object into a string.

let obj = {"a": 1, "b": 3, "c": "boo!"};
console.log(JSON.stringify(obj))

This results in a single line string:

{"a":1,"b":3,"c":"boo!"}

However, you can also set two optional parameters, a filtering array or callback method and an indentation parameter. Setting the indentation to four, for example, creates a multi line string with 4 spaces indentation:

let obj = {"a": 1, "b": 3, "c": "boo!"};
console.log(JSON.stringify(obj, false, 4))

Output:

{
    "a": 1,
    "b": 3,
    "c": "boo!"
}

If instead of spaces you want tabs, you can also defined the indentation parameter as a string:

let obj = {"a": 1, "b": 3, "c": "boo!"};
console.log(JSON.stringify(obj, false, "\t"))

Output:

{
	"a": 1,
	"b": 3,
	"c": "boo!"
}

Or any other string:

let obj = {"a": 1, "b": 3, "c": "boo!"};
console.log(JSON.stringify(obj, false, "xxx"))

Output:

{
xxx"a": 1,
xxx"b": 3,
xxx"c": "boo!"
}

You can define an array of keys you want to show to filter the outcome:

let obj = {"a": 1, "b": 3, "c": "boo!"};
console.log(JSON.stringify(obj, ['a','c'], 4))

Output:

{
    "a": 1,
    "c": "boo!"
}

And you can write a filtering callback function that gets applied to the JSON object. For example, to only allow for numbers to show:

const onlyNumbers = (key,value) => { 
  return (typeof value === 'string')  ? undefined : value 
}
let obj = {"a": 1, "b": 3, "c": "boo!"};
console.log(JSON.stringify(obj, onlyNumbers, 4))

Output:

{
    "a": 1,
    "b": 3
}

You can see more examples on MDN .

Whilst I like these options, it always feels weird to me when a method allows for different values to determine what to do. Having the replacer either be an array or a callback and the spaces option be a number or a string feels confusing. What do you think?

Share on Twitter

My other work: