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 Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Don't stop thinking, AI Slop vs. OSS Security, rolling your own S3 Despite AI you still need to think, Bitter lessons from building AI products,  AI Slop vs. OSS security and pointer pointer…
200: Building for the web, what's left after rm -rf & 🌊🐴 vs AI What remains after you do a rm -rf? Why do LLMs know about a seahorse emoji? What image formats should you use? How private is your car?
Word is Doomed, Flawed LLM benchmarks, hard sorting and CSS mistakes Spot LLM benchmark flaws, learn why sorting is hard, how to run Doom in Word and how to say "no" like a manager.
30 years of JS, Browser AI, how attackers use GenAI, whistling code Learn how to use AI in your browser and not on the cloud, why AI makes different mistakes than humans and go and whistle up some code!
197: Dunning-Kruger steroids, state of cloud security, puppies>beer

My other work: