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
Comments
7 discussions around JSON and JavaScript formatting
  1. Evelyn says:

    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.

  2. Dan says:

    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

  3. Dan says:

    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.

    • Ashley says:

      @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.

  4. masterkylelewis says:

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

  5. Berkay UNAL says:

    JSONFormat was what i needed. Thanks!





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.