I want to show the json output in the similar format? How do I achieve this?
JSON:
{
"isbn": "123-456-222",
"author": {
"lastname": "Doe",
"firstname": "Jane"
},
"editor": {
"lastname": "Smith",
"firstname": "Jane"
},
"title": "The Ultimate Database Study Guide",
"category": [
"Non-Fiction",
"Technology"
]
}
Anything close to this will work for me. I just cannot have the json viewer that we have in retool as non-technical people cannot read it properly.
ScottR
November 18, 2023, 9:43pm
2
You can use a CheckBox tree component and if you need to have multiple ISBNs you can just add the Checkbox Tree component inside a List View Component
1 Like
Skizhu
November 19, 2023, 3:00am
3
i think can be achieved with a table component with expandable rows
1 Like
Skizhu
November 19, 2023, 3:21am
4
this works for you? is the new keyValue component
1 Like
@ScottR , can you provide an example to this approach. This seems to be the closest to what I require.
Yes @Skizhu , I did look into a similar approach.
ScottR
November 20, 2023, 2:16pm
7
Can you send along an example of your JSON with more than one book?
1 Like
Sure,
[
{
"isbn": "978-1-234567-89-0",
"author": {
"lastname": "Smith",
"firstname": "John"
},
"editor": {
"lastname": "Johnson",
"firstname": "Emma"
},
"title": "Programming Paradigms",
"category": [
"Non-Fiction",
"Technology",
"Programming"
]
},
{
"isbn": "978-0-876543-21-0",
"author": {
"lastname": "Brown",
"firstname": "Alice"
},
"editor": {
"lastname": "Williams",
"firstname": "Robert"
},
"title": "History of Ancient Civilizations",
"category": [
"Non-Fiction",
"History"
]
},
{
"isbn": "978-9-876543-21-0",
"author": {
"lastname": "Johnson",
"firstname": "Michael"
},
"editor": {
"lastname": "Davis",
"firstname": "Olivia"
},
"title": "Machine Learning Basics",
"category": [
"Non-Fiction",
"Technology",
"Machine Learning"
]
}
]
ScottR
November 20, 2023, 2:45pm
9
OK so using a table may be best
I added your data into the Data source field and surrounded it with [
and ]
You need to transform all that data as you have done and instead:
For the Author and Editor columns I mapped the values as:
{{item.firstname + ' ' +item.lastname}}
You could also use the Group by function if need be or add a filter to the table which would make it easier to search on if you have a lot of data.
Hope this helps and feel free to ask more questions
1 Like
Hahah! Yeah Table I already created above. Way looking at other ways. Thanks for the response and work. Much appreciated.
ScottR
November 20, 2023, 3:08pm
11
I looked at Checkbox tree and Cascader components but I don't believe there is a Component built in for your exact need.... You could try building a Custom Component instead
1 Like