abodelot / jquery.json-viewer Goto Github PK

how to use jquery.json-viewer in react.
import xx from 'jquery.json-viewer'?

My json has a field, it may contain a regular message or another json as string. It would be nice to have a feature that lets me to click that field, perform action as Decode as json, and string field becomes a property, and its contents are displayed a json too as if it was just another object property.

I want it to be displayed in a div with a fixed length and width, and with a scroll wheel if more than that. What should I do?

I seen you have the code to make the toplevel collapse..

var html = json2html(json, options);
      if (isCollapsable(json))
        html = '<a href class="json-toggle"></a>' + html;

I was was thinking of adding options.toplevelCollapsable != false This will mean if toplevelCollapsable is true or absent, it will still allow collapse, if it's set to false, it will not allow it to collapse

the rendered json would be something like this

{
a: 1
}

but sometimes, users may need quotation mark for a.
{
"a": 1
}

it is recommended that you could add an option to keep those quotation marks.

I don't suppose there would be any out of the box, minimal way to add a 'copy json to clipboard' feature?

Just looking at the element that is created (#json-renderer), I can see all the data is dispersed throughout subsequent child elements.

So, if I wanted to add this feature, when loading the data, I suppose I would need to add the JSON to a data attribute of an element or perhaps even a cookie, and then implement a standard 'copy to clipboard' method?

Perhaps:

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard

Below is a little proof of concept - seems to work, has pretty printing and all!

(I'm not sure if there is a size 'limit' on HTML data attributes).

Part 01 - loading the JSON:

// instantiate json-renderer  
$('#json-renderer').jsonViewer(my_json_data, {collapsed: false, rootCollapsable: true, withQuotes: false, withLinks: false});

// prepend an icon to the json-renderer div  
$('#json-renderer').prepend("<span id='copy_to_clipboard' style='position: absolute; right: 50px; margin-top: 10px; cursor: pointer'></span>"); 

// add the json to the icons data attribute   
$('#copy_to_clipboard').data('my_json_data',my_json_data);

Part 02 - copying to the clipboard:

// copy to clipboard    
const copy_to_clipboard = async (my_json_data) => {

try {
    await navigator.clipboard.writeText(JSON.stringify(my_json_data, null, 2));
    console.log('content copied to clipboard!');
} catch (err) {
    console.error('failed to copy: ', err);
}
}

// add click handling 
$(document).on("click", "#copy_to_clipboard", function() {
    let $this = $(this);  
    let my_json_data = $this.data("my_json_data")
    copy_to_clipboard(my_json_data); 

}); 

长字段怎么折行展示，能实现自动折行么

Hello @jason-lynch

There are perfect plugin for json object viewer so good
but sometimes the json is so large
so there are idea for filter text and manage by collapse so here or part of object only show

This is only my suggestion

Thank you

Hi,
Searching(ctrl+f) on the page does not work when using collapsed = true;

after manuel open:

function isUrl(string) {
var urlRegexp = /^(https?://|ftps?://)?([a-z0-9%-]+.){1,}([a-z0-9-]+)?(:(\d{1,5}))?(/([a-z0-9-._~:/?#[]@!$&'()*+,;=%]+)?)?$/i;
return urlRegexp.test(string);
}

Since the protocol segment is set to be optional, the function will take strings like ""foo.bar"" as Url. Is this an expected behavior? Why not set the protocol segment required?

Hi,
when I have the following JSON content:

"x" : 10

this viewer shows it as:

"x": 10

and removes the space character after the key.
Can you provide an option to keep the space?
It would be helpful when copying the JSON to keep it more similar to the original.

Hi
Exist CDN to jquery.json-viewer.min.js and jquery.json-viewer.min.css ..?

Hi,
I am using a heavily modified version of this since I render stuff different depending on the context of the JSON.
Somtimes I want to change values to customized URLs.
Sometimes I want to fold stuff by default.

Maybe support a generic render API like:

function customRenderer(json, options) {
return {
    rendered: json2html(json, options),
    collapsed: json instanceof Array,
};
}

where o is the currently traversed json key and value.
By default you do not have to register this renderer but you can do it by passing it to the options or something.

This would reduce the number of forked repositories since users can heavily modify this viewer without changing the actualy code.

Not working with below json:

page becomes irresponsive

{
   "randomUUID": [
      "91563848-3db7-47af-8dbb-825721e8907b",
      "826b23ce-2669-4122-981f-3e2e4429159d",
      "e32111a0-6a87-49ab-b58f-a01bf8d28ba0",
      "c055a894-698e-41c0-b85f-7510a7351d9d",
      "b1140fd3-018a-4af5-af4c-b24763335fac",
      "29ea7d0f-1c2b-4bf1-bbaa-e7bfac2d81bd",
      "6e244d8b-db62-4d50-a7fe-79c3d7bf5256"
   ],
   "serverTime": 1564555406117
}

Hello, thanks a lot for your work. This is a very helpful library!

I work with large JSONs and jsonViewer takes few minutes to finishs its job. Yet, when I use the option withLinks: False, its blazingly fast.

I don't know if it's possible to use lighter regexps, but maybe the simplest way to go would be to use withLinks: False as a default option or just warn the users about this problem.

can I somehow control the level of nesting? How is it easiest for me to implement?
nesting (int 0-5, default 3)