Nested List, Flexible Depth

[Ronny_Li]

My database returns nested lists that don’t have a pre-defined depth or breadth.

Example data 1:

• level 1
  • level 1 child 1
• level 2
  • level 2 child 1
  • level 2 child 2
    • level 2 grandchild 1
• level 3

Example data 2:

• level 1
• level 2
• level 3

Any suggestions for how I can build my app to work with both kinds of data?

[Sasu_Makinen]

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.

[Ronny_Li]

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?

[Ronny_Li]

Actually I realized that I also don’t know how to display a static nested list in Composer…

[Sasu_Makinen]

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.

[Ronny_Li]

Thanks Sasu, that’s really helpful for a static nested list!

Two follow-up questions:

1. 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)?
2. 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?
   

[Sasu_Makinen]

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.

[Yiu_Lam_Lai]

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?