loading...

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

david_j_eddy profile image David J Eddy ・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
   }
  ],

Right in the browser console! #mind-blown

Discussion

pic
Editor guide
Collapse
sir_wernich profile image
Wernich ️

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"
}"
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
ben profile image
Collapse
jsalvador profile image
Juanjo Salvador

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

Collapse
arccosine profile image
ArcCosine

Hi, this code is also good!

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

Collapse
arccosine profile image
ArcCosine

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

For the third argument, specify 4 spaces:)

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
mindstudioofficial profile image
MindStudioOfficial

This. Is. Awesome! Thank you :D