A component to select keys from a JSON object that returns the keyʼs path
Users can connect an API and need a user-friendly solution to select values from the response.
- The JSON data is correctly displayed: indention, (curly) brackets, string values, number values, boolean values, arrays, objects, etc.
- All keys can be interacted with and are highlighted (e.g. color: blue)
- When a user clicks on a key, it shows its path and value:
- When a user clicks on “date” it shows “res.date” and "2021-10-27T07:49:14.896Z"
- When a user clicks on “hasError” it shows “res.hasError” and “false”
- When a user clicks on “prop” in the first object in the
fields
array, it shows “res.fields[0].prop” and “iban”
- An input field that displays the correct value when given a path to the property (as seen in the video)
{
"date": "2021-10-27T07:49:14.896Z",
"hasError": false,
"fields": [
{
"id": "4c212130",
"prop": "iban",
"value": "DE81200505501265402568",
"hasError": false
}
]
}
- Open a terminal or command prompt and navigate to the project directory.
- Run
npm install
to install the project dependencies.
npm start
to start the project