yesmeck / jquery-jsonview

[UNMAINTAINED]View JSON in a more readable format

jQuery JSONView

Formats & syntax highlights JSON.

Port of Ben Hollis's JSONView extension for Firefox: http://jsonview.com

Live demo

Usage

Example

var json = {"hey": "guy","anumber": 243,"anobject": {"whoa": "nuts","anarray": [1,2,"thr<h1>ee"], "more":"stuff"},"awesome": true,"bogus": false,"meaning": null, "japanese":"明日がある。", "link": "http://jsonview.com", "notLink": "http://jsonview.com is great"};

$(function() {
  $("#json").JSONView(json);
  // with options
  $("#json-collasped").JSONView(json, { collapsed: true });
});

Options

jQuery JSONView can be configured using the following options.

• collapsed - Collapse all nodes when rendering first time, default is false.
• nl2br - Convert new line to <br> in String, default is false.
• recursive_collapser - Collapse nodes recursively, default is false.
• escape - Escape HTML in key, default is true.
• strict - In strict mode, invalid JSON value type will throw a error, default is false.

API

jQuery JSONView provide following methods to allow you control JSON nodes, all methods below accept a level argument to perform action on the specify node.

• jQuery#JSONView('collapse', [level]) - Collapse nodes.
• jQuery#JSONView('expand', [level]) - Expand nodes.
• jQuery#JSONView('toggle', [level]) - Toggle nodes.

Licence

MIT

jquery-jsonview's Issues

Feature Request : collapsed state to indicate the length of the array

When a node is an array let the collapsed state indicate the length of the array instead of an ellipsis (...)

Issue with collapse/expand/toggle functions

You can reproduce it even your sample page:

1. Open page http://blog.yesmeck.com/jquery-jsonview/
2. Click button "Toggle level 1"
3. Now click sign '-' near property 'anobject'

You will notice error in console:
TypeError: Argument 1 of Node.removeChild is not an object.
on line:

target.parentNode.removeChild(ellipsis);

Problem exists in this part of code:

if (args[1] != null) {
    level = args[1];
    return $this.find(".jsonview .level" + level)[method]();
} else {
    return $this.find('.jsonview > ul > li > .collapsible')[method]();
}

It happens because you just hide or show collapsible area only.
But sign '-' was not changed to '+', no ellipces was added, correct css classes, etc.

Instead of using standard jQuery functions here should be used existing "Collapser" object, which can hide or show collapsible area in a proper way.

Feature Request

Any particular reason why html Keys are not supported ? here
It can be solved simply by changing (this.jsString(prop)) to prop.
Let me know this is ok, and i'll create a pull request.

Feature request: data for node via Ajax call

It would be great to be able to have children/data for a node loaded via an Ajax call that is only made when the node is expanded. This way, for larger documents, the entire document doesn't have to be loaded from the start.

publish your lib on CDNJS ?

Hey yesmeck !

Your JSONView lib is great and I'm sure I'm not the only one to think that you should publish it on cdnjs.cloudflare.com for easier use !

You'll also get a huge new audience as beleive me I searched there is no equivalent on CDNJS yet !

Congrats on the work !

Bower Version

Hey Yesmeck,

please provide this within bower!

Regards
Markus

Publish to bower registry

It would be nice to have it available via bower.io

Downstream Compilation Issue

Howdy 👋

I'm including this in an application that has clean-css as part of its build process. When building a production build the build process get clean-css to "throw on warning" which is designed to prevent any issues with CSS unknowingly getting through to the production build (I guess).

It has started failing on jquery-jsonview because the css file has a sourceMappingUrl definition at the bottom of it but there is no sourcemap actually provided https://github.com/yesmeck/jquery-jsonview/blob/master/dist/jquery.jsonview.css#L56

I don't know if it's easy in your build process to just remove this comment line but if you could point me in the right direction I might be able to take a look with a PR if I get a chance.

Expand/Collapse

when calling jsonView('collapse'), although it collapses the first level nodes, the inner level are kept in tact, there should be a way to collapse all (including the inner/higher levels )

发现bug一枚

var jsonFormatter = new JSONFormatter;
// Covert, and catch exceptions on failure
if( Object.prototype.toString.call(jsonObj) !== '[object Object]' ) {
jsonObj = JSON.parse(jsonObj);
}
var outputDoc = jsonFormatter.jsonToHTML(jsonObj);

如果jsonObj是个Array呢？

Feature request: Can I edit JSON on the page

After render the JSON ，Can I edit on the webpage such as modify some key's value and I can save the modify to the original JSON data

Long loading time with large JSON object.

It's taking a long time to load a large JSON object into the plugin. Is there a way to optimize the plugin to increase the speed?

Very slow on large jsons.

Should not create inner logic if collapsed:true is given, should initiate inner logic only when tree is collapsed. (only on click)

nl2br does not honor escaped backslashes

nl2br should not add a <br> for something like this:

{
 u : "test\\rob"
}

Suggestion to support pretty view of multiline string

Hi,

Currently multiline string displays as singleline with encoded symbols \r\n.

In my project I fixed it by enhancing JSON formatter encoder:

JSONFormatter.prototype.htmlEncode

I just added additional replacement:

.replace(/\\r?\\n/g, "<br/>")

What do you think about having such logic in this plugin by default?

Where is the "Maintained" version? Does it exist

title says it all.

I noticed it says "Umaintained" in the sub header so I was wondering if there was a different version of this project.

Feature request: API to return clean JSON object

Currently if you get the content of the DOM element processed by JSONView it includes the - (dash) for toggling nodes. Would be really useful to get back the clean object though, say, JSONView('json').

Add a option to allow collapse/expand all children nodes when click a parent node.

The options may something like { recursive_collapser: true }

Feature Request: Add ability to view JSON path in tooltip

JSON Viewer chrome extension, shows the JSON path on hover, is there a way to get the same in this ?

Add feature to call collapse outside

It will be a good feature to collapse code from outside, for example by button. And abiltiy to choose nested level for collapse will be awesome.

The value is changed

The live demo link is broken