Readable JSON

JSON is the lingua franca of APIs. We GET it. We POST it. We UPDATE it. We may even DELETE it every now and then. And as long as the JSON flows, our apps run and things are good.

But, while JSON is easy for machines to read, humans tend to have more trouble with it. The infinite nesting. The endless brackets, braces, colons, commas, and quotes – you could easily go cross eyed trying to parse it all.

Here’s an example from a project that I’m working on:

```json { “gameData” : [ { “prompt” : { “delay” : 10, “msg” : “Bruh”, “npc” : “1” }, “triggers” : { “*” : 2 } }, { “prompt” : { “delay” : 10, “goto” : “3”, “msg” : “Last night was NUTS!!!!!”, “npc” : “1” } }, { “prompt” : { “delay” : 25, “msg” : “We going again tonight?”, “npc” : “1” }, “triggers” : { “no” : “5”, “yes” : “4” } }, { “prompt” : { “delay” : 20, “msg” : “Word, see you there!”, “npc” : “1” } }, { “prompt” : { “delay” : 30, “msg” : “Aight, rest easy.”, “npc” : “1” } } ] }

```

That’s a fairly shallow structure without much nesting, but it’s still not super intuitive and it takes a lot of vertical space to make it readable. Compare that to a tabular view:

Sample JSON to CSV Converter output

That’s a lot easier to read, right? I created that table with a client-side JavaScript JSON to CSV Converter written by 18F’s Eric Mill.

Try out the demo for yourself. All you have to do is paste in JSON and it’ll convert it to CSV, give you a download link, and let you preview it as an HTML table.

Comments :)
2017 Neal Shyam