Visual representation of JSON that allows to easily see how to access elements.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
README.md

README.md

JSON Visualize

I constantly see Stackoverflow questions about how to access particular JSON values, usually along the lines of

obj.item

not working when

obj[0].item

is what is desired.

JSON Visualize does some very simple parsing of JSON to create a DOM-based visualization that makes it easy to see what path is required to select the desired value.

Using

TODO: Create a test html page of my own.

Create a test HTML page with a single element with id of container. Then, include the JsonVisualize script, and make sure that you have access to a JSON object or object string (either will work). Use like so:

(new JsonVisualize(objectVariableName)).display();

The title attribute on all scalar element values (blue with the provided CSS included) contains the path to access said value.

Things to come

  • Correct increasing left margin on structures after names (i.e. stop it)
  • Allow for continuous display of titles on click
  • Also display all titles simultaneously with special button click or something
  • Include path to non-scalar values as well