DEV Community

loading...

TIL: JSON.stringify() can do formatted output.

David J Eddy
AWS Certified (x4), Automated Testing / Continuous Integration / Delivery / Deployment (CI/CDs), Cloud, Containers, Dev(Sec)Ops, Software Engineer.
・1 min read

TIL JSON.stringify can do formatted and indented output. JSON.stringify(yourJSObjectHere, null, 1). This is awesome when you want JSON formatted output that is not all run together. Such as:

"impressions": [
   {
    "name": " + Holiday Bundle: Dragon Ball Z - Seasons One - Season Nine ",
    "id": "FUN-33201",
    "price": "159.99",
    "category": "SALE",
    "list": "Home: New Shop Arrivals",
    "position": 1
   },
   {
    "name": "Attack on Titan + Funko Pop - 6'' Colossal Titan",
    "id": "FUN-00183",
    "price": "17.99",
    "category": "Figures & Collectibles",
    "list": "Home: New Shop Arrivals",
    "position": 2
   },
   {
    "name": "Fairy Tail + Collection Five",
    "id": "BLD-00199",
    "price": "49.99",
    "category": "Home Video",
    "list": "Home: New Shop Arrivals",
    "position": 3
   },
   {
    "name": "High School DxD + Asia & Koneko Drawstring Bag",
    "id": "FUN-25211",
    "price": "17.99",
    "category": "Accessories",
    "list": "Home: New Shop Arrivals",
    "position": 4
   },
   {
    "name": "Case Closed + Countdown to Heaven",
    "id": "DVD-00058",
    "price": "11.24",
    "category": "Home Video",
    "list": "Home: New Shop Arrivals",
    "position": 5
   },
   {
    "name": "Attack on Titan",
    "id": "17847",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 1
   },
   {
    "name": "My Hero Academia",
    "id": "124389",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 2
   },
   {
    "name": "Monster Hunter Stories Ride On",
    "id": "155585",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 3
   },
   {
    "name": "One Piece",
    "id": "20224",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 4
   }
  ],
Enter fullscreen mode Exit fullscreen mode

Right in the browser console! #mind-blown

Discussion (9)

Collapse
sir_wernich profile image
Wernich ️ • Edited

i like to use "two spaces" as indentation:

var obj = {name: "bob", lastname: "jones", age: 24, favouriteFood: "food", favouriteColour: "blue?", loves: "biscuits" };

JSON.stringify(obj, null, "two spaces");

"{
two spaces"name": "bob",
two spaces"lastname": "jones",
two spaces"age": 24,
two spaces"favouriteFood": "food",
two spaces"favouriteColour": "blue?",
two spaces"loves": "biscuits"
}"
Enter fullscreen mode Exit fullscreen mode
Collapse
sir_wernich profile image
Wernich ️

but yes, this is a pretty cool function i never thought about investigating.

for those interested in what the null could be doing: developer.mozilla.org/en-US/docs/W...

Collapse
jsalvador profile image
Juanjo Salvador

Wow, this cool feature was here all the time... And we never noticed it.

Collapse
ben profile image
Ben Halpern

Nice!

Collapse
mindstudioofficial profile image
MindStudioOfficial

This. Is. Awesome! Thank you :D

Collapse
arccosine profile image
ArcCosine

Hi, this code is also good!

JSON.stringify(yourJSObjectHere, null, " ");

Collapse
gyandeeps profile image
Gyandeep Singh

Yeah this is so awesome... I dont think many people know about this... I wrote about this long time agao... gyandeeps.com/json-file-write/

Collapse
david_j_eddy profile image
David J Eddy Author

Right! Also, added your blog to my reading list + following you on the Twitters. Really liking your writing style.

Collapse
arccosine profile image
ArcCosine

Hi, this code is also good!
JSON.stringify(yourJSObjectHere, null, " ");

For the third argument, specify 4 spaces:)