caldwell / renderjson Goto Github PK
View Code? Open in Web Editor NEWRender JSON into collapsible HTML
Home Page: http://caldwell.github.io/renderjson
Render JSON into collapsible HTML
Home Page: http://caldwell.github.io/renderjson
Is there a way to initialize the JSON object with every node expanded?
When printing string value in an object, it wrap the value with duplicated double quote. Following is the quick fix I put into my local copy:
file: renderjson.js line: 117
if (typeof(json) == "string")
if (json.length > max_string)
return disclosure('"', json.substr(0,max_string)+" ...", '"', "string", function () {
return append(span("string"), themetext(null, my_indent, "string", JSON.stringify(json)));
});
else
return themetext(null, my_indent, typeof(json), json);
Hi !
renderjson doesn't seem to work on IE11.
Can you confirm ?
I get an error about the "assign" method not being supported.
I am running IE11 on win 10 with no "emulation" mode.
Thanks in advance
For example we have a json
{ 'subject' : { '$id':'123', 'name':'maths', 'desc':'some desc' }, 'students': [ { '$id':'1' 'firstName':'bob', 'lastName':'agent', 'subjects':[ { '$refId':123 'type':'subject' } ] } ] }
Here you can see the subject in student object has a referenceid to subject object. A feature to make the reference ID's clickable so we can auto navigate to the subject object instead of trying to search in a long rendered json.
Due to the way the module is exported, the renderjson
identifier (and the IIFE it is initialized to) is leaked into the global scope. Declaring it as a variable first and then initializing it with the IIFE would prevent the leak, be trivial to do, and not break any existing code. I'm happy to put together a PR.
Is there a way to use set_replacer to make links in the tree clickable?
Hi,
I have a nested json which is very large. And I just want to show the first level instead of hiding all of them. How can I do that?
Thanks,
Guan
Could you please implement similarly to how nested objects are collapsed that also for huge/long string values they are initially collapsed and then user can expand them? So I have an issue that some objects have really long strings. And it would be great if they would not be shown unless user requests that.
I was looking at the code but was unsure how to implement this.
I recently converted python-shell to typescript, Also see my medium article. (cause every two-bit dev has to have a medium article now right? :P )
Eventually I want to implement #17 perserving open/close of nodes, but before I do that I would want to convert to typescript.
Not sure when I'll get around to this. After October or later probably.
Hi. Thank you for this amazing tool.
I'd like to have ability to customize or remove quotes from JSON keys. I though I can do it with replacer
function, but unfortunately I can't.
Pulled it via npm.
// importing
import renderjson from 'renderjson/renderjson'
// template
<div v-html="performance_report" v-if="performance_report" > </div>
// executing on mount
mounted(){
this.performance_report = renderjson({ hello: [1,2,3,4], there: { a:1, b:2, c:["hello", null] } });
},
// outputs ``{}`` without any errors
Would be nice if the indent could be adjusted
might try looking at this over the weekend, but I make no promises
It would be nice to have truncation paramater in case there are too many items. set_show_to_level is useful in this regard, but it doesn't cover cases in which there are too many items in the level that you normally want shown.
Just something like this would work:
.............................
..............................
154 items truncated +
Alternatively, you could go with the approach used in the chrome developer tools and summarize the items like so:
[ 0-100 ] +
[ 100-200 ] +
[ 200-300 ] +
etc.... increasing the scale with the number of items.
This is not a bug but rather a feature request.
When a JSON is rendered, it will be great if the code could scan and if it finds a string starting with "http", then render that link as a clickable link.
It would be great if we could set a limit for which arrays are automatically unfolded. We have a lot of results that can potentially have many items, but often only have one. Unfolding them by hand is a little tedious, so having a limit that tells the system to unfold if there are only less than n items would help a lot. This would work with show_to_level, so I would think it would make sense to unfold everything to the given level, if the number of items is less than the unfold_if_less_than value.
Thanks!
After a long string containing \n
is truncated, these new lines are actually printed, causing the truncated link to be multi-line, while the original is single line (and showing \n
)
Hi Dear,
I am trying to use your library and I am facing this problem.
Below is the code. Can you help me on this
angular.element(document).ready(function () {
renderjson.set_icons('+', '-');
renderjson.set_show_to_level(1);
var jsonstuff = document.querySelector("#json");
console.log(jsonstuff);
jsonstuff.append(
renderjson( $scope.nsdJSON)
);
});
Thanks for this wonderful tool. I preview large JSON docs and it would be better to have the disclosure on the left. This way, it is offset from the rest of the keys and you can quickly visualize which keys have children by looking at the left.
For example, I work with NodeRED, and they render objects using this type of disclosure:
If I look at the same object section using renderjson:
As you can see, it is harder to tell which keys have children. Thanks again!
I have installed renderjson (npm i renderjson), and I have imported it
import renderjson from 'renderjson';
when using in my code:
const jsonElement = renderjson(myjson);
i have the following error:
react-dom.development.js:9126 Uncaught ReferenceError: renderjson is not defined
This is an amazing tool, thank you for building it!
I'd like to be able to update the json structure dynamically and preserve which nodes are open or folded.
Perhaps by having a way to query for the currently 'open' nodes, and to pass that result in when generating the replacement HTML. The query result would have to be somewhat aware of the data content so that nodes not present after the update are ignored. This same mechanism could be used to give people fine grained control over which nodes are opened during the initial display.
e.g.
renderjson.set_indentation(2); // adjust space-count
or
renderjson.set_indentation(' '); // allow tabs or spaces
or
renderjson.set_indentation('space', 2); // self-explanatory
or...
infinite number of ways to implement this, please consider it.
Using var window
gives a redeclaration error in IE9 (while, funnily enough, works OK in IE7):
Also, I'm not sure that declaration has any use, as the only line where window
is used is already managed with (window||{})
.
(part of the same might apply to var define
and var module
too, but they're not giving direct problems in IE9)
I would expect set_max_string_length to work regardless of the level set. For example, if a large paragraph comes along in the first level you would want to show the first part of the paragraph, but truncate the rest.
The description for max_string_length implies it works regardless of level:
Strings will be truncated and made expandable if they are longer than
length. As a special case, if length is the string "none" then there
will be no truncation. The default is "none".
Instead what happens is that if the string is in a shown level, the string is expanded by default.
Hi,
Is there any option available to copy the JSON text after it has rendered. I tried to copy that and there are special characters that also get copied that are not required.
Regards
Hi, I was wondering if your license was part of a named license. I was looking at using this library for a company project, and there's only some licenses I am allowed to use.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.