Use your left/right keys to browse tutorials
JSON and JavaScript formatting

JSON and JavaScript formatting

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on February 4, 2010

I’ve recently been working on a large project that required a lot of JSONP encoding and parsing. To be honest its been a bit of a nightmare because of one simple problem. the formating that JSON spits out onto the page is non-existant its like a printing out a PHP array and viewing it in your web browser, however with an array you can either view the page source and see the formating or simple print_r($array); within pre tags which will format the array visually without having to view the page source.

Getting back to JSON, I found a great little tool for formating it using jsonformat.com. If your JSON contains no errors it will spit it out nicely formated and easy to read. As shown in the JSON code from my earlier post on how to build a JSON product gallery below.

Formatted JSON

[ { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "1.jpg",
    "title" : "B&O 5.1"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "2.jpg",
    "title" : "B&O TV"
  },
  { "description" : "Market leader in the UK. Roberts produce a wide range of DAB digital radios. Roberts is a consumer electronics company producing DAB, analogue and wi-fi ...",
    "image" : "3.jpg",
    "title" : "Roberts Radio"
  },
  { "description" : "Toshiba is a diversified manufacturer and marketer of advanced electronic and electrical products, spanning information & communications equipment and systems",
    "image" : "4.jpg",
    "title" : "Toshiba TV"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "5.jpg",
    "title" : "B&O Audio"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "6.jpg",
    "title" : "B&O Remote"
  }
]

Another problem I find is if i’m writing JavaScript quickly I usually don’t format it very well especially when I’m still sorting out the logic etc, but a simple formatter for JavaScript is jsbeautifier



More tutorials from Papermashup
  • Evelyn

    I’ve found another simple JSON formatter http://www.onlinejsonformatter.com/ What it does extra is it can even allows you to convert your JSON to XML.

  • Dan

    Good points!

    Based on the intro to the article I jumped to the conclusion that you used a JSON formatter to somehow make it easier for you to work with JSON data in your project.

    Usually, you would not parse JSON manually but rather use a library like the ones you can find on http://json.org/ ; they usually handle syntax errors, so that’s already covered.

    But I understand your point about formatting JSON to include it in blog posts and the such.

    All the best,
    Dan

    • http://www.papermashup.com Ashley

      @Dan, cool no problem, good points though, and thanks for the response! :)

  • Dan

    Why would you need to display JSON data on the web page in the first place?
    You can debug JSON directly in Firebug, which formats it as a tree structure.

    • http://www.papermashup.com Ashley

      @Dan, i needed to format the JSON code for this blog post as well as previous posts, also this is a solution if you don’t have firebug installed, it also doesn’t just format it but lets you know if there are any errors in the code.

  • masterkylelewis

    I like this i might actually research this more in depth!

  • http://www.berkayunal.com Berkay UNAL

    JSONFormat was what i needed. Thanks!