josdejong/jsoneditor

Option to show quotes around strings

Open

#1,516 opened on May 13, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (10,781 stars) (2,034 forks)batch import
featurehelp wanted

Description

The API we work with returns a JSON with a bunch of fields. Sometimes it deals with numbers that may be sent as a string, especially where the number of digits (and any leading zeroes) are important to be preserved.

For example, there are cases where an ID needs to be 5 characters so a 4-digit ID is sent as "01234". But the UI makes it hard to know whats a string and what's a number because neither are quoted.

{
  "num_id": 1234,
  "str_id": "01234",
}

is rendered as

It would be nice if there was an option to show quotes for string values in the tree UI.

Contributor guide

Tech stack
javascripthtmlcss
Domain
frontenddeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic understanding of the JSON editor's tree rendering component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The request is to add an option that displays quotes around string values in the tree UI. Start by examining the tree node rendering logic in 'src/js/TreeEditor.js' or similar files where string values are rendered. Look for the function that formats the value display, likely in the node's 'renderValue' method. Then, add a configuration option (e.g., 'showQuoteForStrings') to the editor's options. The existing options like 'indentation' or 'mode' can serve as a pattern for implementing the new toggle. Ensure the change only affects the display and does not alter the underlying data.