How to achieve JSON grid?

[khatanaashish]

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]

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

[Skizhu]

i think can be achieved with a table component with expandable rows

[Skizhu]

this works for you? is the new keyValue component

[khatanaashish]

@ScottR , can you provide an example to this approach. This seems to be the closest to what I require.

[khatanaashish]

Yes @Skizhu , I did look into a similar approach.

[ScottR]

Can you send along an example of your JSON with more than one book?

[khatanaashish]

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]

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

[khatanaashish]

Hahah! Yeah Table I already created above. Way looking at other ways. Thanks for the response and work. Much appreciated.

[ScottR]

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

[khatanaashish]

Thanks.