alenaksu/json-viewer

Web Component to visualize JSON data in a tree view

json-viewer's Issues

Missing files

Great component. I updated to the latest. It seems that npm only publishes 3 files now -- no js files.

Feature Request: CSS variable for padding

I would like to request a CSS variable be added for padding to the wrapping shadow DOM element (ul tag), so one can add a little space to the content, especially when it's long and needs to scroll. Thanks!

License file missing

The Readme has a badge, which indicates, that this project has an MIT license, but the license does not exist and the link in the README therefore returns a 404 Not found.

Is this intentionally, or should I make a pull request which readds the MIT License file?

search always scrolls document.body

Even though my element is deeply embedded in my html page structure, when I search for a value using viewer.search() it scrolls the whole document.body not the viewer element causing vertical page movement.

Similarly when initially loading the viewer with data it scrolls document.body around 20 pixels to the left.

ASP.NET Core Blazor Integration

Hi,

I wanted to let you know that I've integrated your powerfull package as Blazor Component.

https://github.com/Texnomic/JsonViewer

Thanks for your work!

BigNumber support

I am trying to display very large numbers but unfortunately they are getting rounded and cut by JavaScripts Number type..

any chance zu support BigNumber or a similar Type?

https://dev.to/fvictorio/a-comparison-of-bignumber-libraries-in-javascript-2gc5

display property with html markup

Hi, first I'd like yo thank you for a great piece of code.

Some json objects may have properties that contain html markup, i.e. a link to a page, like in the address property below.

{
"widget": {
"debug": "on",
"window": {
"title": "a window title",
"address": "Goto",
"name": "main_window",
"width": 500,
"height": 500
}
}
It would be nice, if the viewer can have a special csspart to render the markup as is .

Thanks
Michel
[email protected]

Not working in browser after 1.0.0

Describe the bug
After 1.0.0 json view is not rendered in browser with following error.

Uncaught SyntaxError: Unexpected token 'export' (at JsonViewer.js:45:94)

Error message indicates that it is an ESM module and i tried to add type="module" attribute to script tag but it did not work too. I couldn't find anyhing about ESM change in releases page and readme.
Then i tried to use index.js file from demo and it worked with type="module attribute.
I think demo is using a custom file. It would be better to use latest distributed file in demo to detect issues early.

To Reproduce
Steps to reproduce the behavior:

1. Copy the code below to JSFiddle
2. Enable the script with version 0.3.4
3. ✔️ Json view shoud be rendered
4. Enable the script from gibhub.io which is used in demo site
5. ✔️ Json view shoud be rendered
6. Enable the script with version 1.0.1
7. 🔴 You will only see json as text not json view

Link to Minimal Reproducible Example

<json-viewer>
{"widget":{"debug":"on","window":{"title":"Sample Konfabulator Widget","name":"main_window","width":500,"height":500},"image":{"src":"Images/Sun.png","name":"sun1","hOffset":250,"vOffset":250,"alignment":"center"},"text":{"data":"Click Here","size":36,"style":"bold","name":"text1","hOffset":250,"vOffset":100,"alignment":"center","onMouseUp":"sun1.opacity = (sun1.opacity / 100) * 90;"}}}
</json-viewer>

<!-- <script src="https://unpkg.com/@alenaksu/[email protected]/dist/index.js"></script> -->
<!-- <script type="module" src="https://alenaksu.github.io/json-viewer/index.js"></script> -->
<!-- <script type="module" src="https://unpkg.com/@alenaksu/[email protected]/dist/JsonViewer.js"></script> -->

Expected behavior
It should render tree view

Bug: When updating data dynamically, the library throws JSON.parse errors

What

When we're not using the <json-viewer> with any content, and rather just using the data attribute to dynamically update data. It throws the following error:

Example usage:

  <json-viewer class="p-4" data={props.response?.data}></json-viewer>

In this case, the error is thrown.

More context

I'm using this in a SolidJS app where the data attribute gets updated throughout the app's usage.

Expected behavior

Should not throw an error in this case and should allow to just use of the data attribute for rendering.

Accessibility: keyboard navigation

Check the feasibility to display non-JSON data types

Possible types:

• Date
• BigInt
• ???

Additional context
#26 #30

Polymer 3 Support

Hi, can I use this component in polymer 3?
I've problem when import this component in my polymer 3 project.
Module not found: Error: Can't resolve '@alenaksu/json-viewer'

Best Regards,
Reja

demo not working

I cant get the demo to run

this is what i see..
the console says [404] Not Found (/static/styles.js)

How to use in with just index.js?

I tried the example, however the component just displays “null”.

I referenced the index.js and css files from the build folder, are those the wrong files?

Search in deeply nested JSON structure

Having a big or deeply nested JSON on page it's real hard to find something specific in it.
It would be really useful to have a way to search everywhere in JSON.

Maybe a quick but effective solution could be an "expand/collapse all" button and then we can search with native browser feature.

Allow setting data asynchronously

Excellent component!

I find that if I do a dynamic import of your library, and while the import is downloading, set data (before the custom element has had the chance to get registered), the data is lost after the component is initiated.

You might find this document helpful, search for "_upgradeProperty()"

Possible issue outputting dates from nested object

Hi there, thanks for this great component!

I'm running into an issue where sometimes my nested dates are showing as empty objects. I can't seem to pin down exactly why this is happening but will try and take another look at the source code.

For now I'm working around this by checking my structures for dates and formatting them ahead of time.

Thanks again (comparison with JSON.stringify below)

make filter less rigid

Is your feature request related to a problem? Please describe.
my array of json has address_1, address_2, address_3 it's a pain to pass a filter string to get all 3

Describe the solution you'd like
ideally I could filter('addr') and any key/value pair with those 4 consecutive letters would remain while everything else gets hidden.

Describe alternatives you've considered
right now i just do **.entire_field_name

Additional context
Might need to put this functionality behind an option like filterMode(...) which allows users to keep the exact (default), or fuzzy (generous filter matching both keys and values with partial strings)