0

I have a HTML5 application built using Twitter Bootstrap and JQuery (core).

It is a test/demo front-end for a REST-based service API.

In this application, I would like to show the JSON being received. On the page, that is. Not the console.

I would like to format the JSON (pretty-print) to be a bit more HUMAN-readable.

Is there an easy way to do this using HTML, JavaScript, and CSS? Is there a component I can use?

In addition, but not so important, I would like to give the user the ability to enter the JSON that makes up the request body. Is there a way that I can validate the JSON on the fly. Again, using HTML, CSS, and JavaScript?

Update: This question is a duplicate, and can be closed. It has been answered elsewhere - I should be using JSON.parse() followed by JSON.stringify(...) - stringify() works on JSON objects, not JSON text strings, hence the need to parse() first

Vihung
  • 12,947
  • 16
  • 64
  • 90
  • 1
    you can use that answer: http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript – levi Aug 04 '14 at 18:35
  • As far as validation (which should be a separate question), you'd take the text (from a `textarea`, etc.) and run it through `JSON.parse()` within a `try ... catch` block to see if any errors were thrown. – Paul Roub Aug 04 '14 at 18:38

1 Answers1

0

I have used a library called Swagger before. It has most of the components separated out into individual libraries but this Demo shows how it looks when connected.

The library will print the JSON in a pretty format and it allows for people to enter different request information. It may be a little heavy for what you need but some of the libraries may be useful.

erik-e
  • 3,721
  • 1
  • 21
  • 19