My database returns nested lists that don’t have a pre-defined depth or breadth.
Example data 1:
- level 1
- level 2
- level 2 child 1
- level 2 child 2
- level 3
Example data 2:
Any suggestions for how I can build my app to work with both kinds of data?
Everything can still be bound to variables even though there’s no schema or even a schema mismatch.
It just makes it a bit harder as you need to know what kind of data you’re dealing with without any help from the composer.
Ah great, thanks Sasu. And how would I display these nested lists on the page? I would need a way to recursively iterate through the arrays repeating components until everything has been iterated over right?
Actually I realized that I also don’t know how to display a static nested list in Composer…
Displaying nested data is always a bit tricky. I made this simple example to maybe help you get started.
So here we have a list of bars that has a list of beers. The raw array is shown in the top, and rendering below.
So at first I have a container component which repeats the bar list as bar
Inside I have a Title
component which is bound to repeated.bar.name
which refers to the repeated arrays object property called name
for each object in the array.
Then I have a list component that repeats repeated.bar.beers
as beer
so that can be then found under repeated.beer
in formulas or the binding editor - it behaves the same way as the repeated.bar
. And this repeated.beer.name
is bound to the list label.
Your app would obviously be more complex with arbitrary nest depth and no specific schema, so it’s going to be a fight to make it great. Anyway hope this helps.
Thanks Sasu, that’s really helpful for a static nested list!
Two follow-up questions:
- Would a custom React plugin allow me to import my own nested list component that can handle arbitrary depth (assuming the same schema at every depth)?
- In the example you shared it looks like you manually repeat components to create the nesting effect. Any advice on how I could programmatically repeat to arbitrary depth? I saw this really cool Logic Canvas implementation to repeatedly run a function. Is there something similar for creating UI components?
I’m sure you could do it programmatically, but I unfortunately don’t have time to implement such a thing in the near future. I’ll ping our team and see if someone could do it.
Custom plugins are on the table but not there yet.
1 Like
Thanks for this great share. It solve my problem.
However, I could not find a way to fill data into the inner list.
Can anyone help?