Converting a Javascript object to a readable JSON file

While working through the final challenges at FCC (Free Code Camp) I coded a live working Angular.js project alongside the hand-holding tutorials that are entirely done in side the browser.

The tutorials at CodeSchool are excellent as they prompt you step by step through what initially seem like very complex tasks.  As a I worked through the tutorial and watched the videos, I recreated the project (a fun little gemstore) on my own computer.

This was really important to me to convince myself that I understood the technology.

However in the final final step of the angular.js course, and thus the final challenge of Free Code Camp, they introduced a cool trick to import data from an external file in a format called JSON.  JSON is very similar in appearance to how a Javascript object appears…it’s human readable in the same way, however the syntax is slightly different.

 

It was going to be a daunting task to convert the entire object from Javascript to JSON just to get this last step working.  A little googling led me to two pieces of advice that solved my problem instantly.

 

First was this gem at Stackoverflow:

  1. Launch Firefox/Chrome/Safari
  2. Open Firebug/developer tools
  3. Copy/paste your code into the console.
  4. Then type console.log(JSON.stringify(object)) and voila!

So I tried it, and got back a minified version of the JSON object. This actually worked fine, but I couldn’t read it, so I used this nifty site to simply format it with line breaks and tabs:

https://www.jsoneditoronline.org/

Just click the icon of the little outline after pasting in the results from your console and presto…there is your JSON file.