Add displayArrayKey Option for Rendering Array Keys in JSONViewer

[Cylop]

Greetings,

I have implemented a new feature in the JSONViewer, introducing an option named displayArrayKey. This feature aims to enhance the user experience by providing additional flexibility in visualizing JSON data.

Feature: 'displayArrayKey' Option

The displayArrayKey option, when set to false, prevents the rendering of the keys of an array and appends a colon to the end of the line. This results in a cleaner and more concise output for users who find array keys unnecessary in certain contexts.

Usage:

<JsonView
  src={object}
  displayArrayKey={false}
/>

Enabled (without keys):

Disabled (with keys):

Use Case:

This addition is beneficial for developers seeking a streamlined representation of JSON data, especially when handling large arrays where the keys might not contribute significantly to comprehending the data structure.

Documentation:

The documentation has been updated to encompass the new displayArrayKey option, elucidating its function and effect on the JSON data representation.

Conclusion:

I am confident that this feature will serve as a valuable enhancement to the project by offering more versatility in displaying JSON data. I look forward to your feedback and am open to making any necessary modifications.

Thank you for considering this contribution. Looking forward to a positive review and eventual merge.

Best Regards,
Nicholas

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
json-view	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 28, 2023 4:46am
react18-json-view	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 28, 2023 4:46am

[YYsuni]

Project use pnpm as default for the workspace

[YYsuni]

package-lock file will confuse Vercel deployment.

[YYsuni]

We just need to use displayArrayKey in NameValue component. Changes here are needless.

[YYsuni]

I'm not sure why the new component was created here. We could just change a little code in the NameValue component.

[Cylop]

I’ve separated the code into a distinct component for clarity and readability. Integrating it with the original component could lead to clutter. However, I can relocate this new key component to the name-value file for a more concise separation of code. Would that arrangement be more suitable for you?

[YYsuni]

The important point is to use the displayArrayKey from useContext instead of props. Also, the conditional operator is enough.

[YYsuni]

Again, attribute passing should not happen except for depth and props with a parent relationship.

[YYsuni]

I noticed the new comma added and had a thought: why do we add the prop viewMode: viewer or json? Which means json mode has the comma symbol, but the viewer mode not.

[Cylop]

That sounds like a good idea, I'll implement the comments!

[Cylop]

I started changing right now, do you think with the view mode 'viewer' or 'json' - do we need the displayArrayKey option at all?

[Cylop]

I introduced now the new option viewMode with options['json', 'viewer'] where 'viewer' is the default one. Once 'json' is selected, commas are appended to the end of the line, whereas 'displayArrayKey' only the display of array keys disabled.

I removed the package-lock and used pnpm (missed that before)

I also removed the new file and adapted the existing 'name-value.tsx'.

This options are now available:

[YYsuni]

Sorry, I am on vacation.

[YYsuni]

The viewMode property seems a bit wasteful as it is only used to determine whether to display commas.😆
Let me think twice...🤔

[YYsuni]

The formatting here is not that friendly.😅