Display nested Json data

I need to show nested data (json response from external API) to the user within my app.

I’d like to create a component so the user can drill down through the json data, expanding and collapsing each section and subsection. The data can be 2-5 layers deep and always end at a list, so the component needs to be fairly dynamic.

Currently I’m processing it with Javascript and converting to markdown, but the output is really ugly and limited (I can’t then create events from a user clicking on one of the items). I just stumbled across the MAP function and think this could be helpful, but I’m not sure how to deal with the cascading data.

Any thoughts on how to approach this?

Thank you!!

Data example:
{
“animals”: {
“wild”: ["zebra, giraffe, “tiger”],
“domestic”: [“dog”, “cat”, “parakeet”]
},
“colors”: [“red”,“blue”,“green”]
}

Hi Joe, welcome to the community! You can do this with nested repeats.

This video gives you the basics of repeating data in Composer Pro: Power-up: Lists & Repeats - Composer

Nested repeats have been explained in this thread with a similar question to yours: Nested List, Flexible Depth - #5 by Sasu_Makinen