Hierarchical tree (parent relationship) presentation

[xatares]

Hi All,
I’m a newcomer to Wappler World, and I love it!

I have a table with hierarchical relationships (5 levels department->parent department), and I want to list all departments in a treeview.
Example:

I successfully did the server side based on the discussion and the tutorial on this topic

Here is the data + json output

I struggled with showing the data using the repeaters.
I followed the tutorial (Nested Repeat Regions), but I couldn’t reach the result that I aim for.

Each time the repeater keeps showing the first child dep (4X 2.1) instead of (2.1, 2.2, 2.3), and the same for the lower levels.

Can you please help me and tell me what I did wrong?

Thank you
Sami

[famousmag]

Hello @xatares,

Welcome to Wappler Community.

Your json data looks good, meaning that your server actions are ok because .
Please show the front side (repeat2 secondary text ).
Which value are you assigning to it?
The usual mistake is to pull the first record’s data (repeat2[0].dep_name) instead of the current (repeat2[$index].dep_name)

[xatares]

Thank you so much @famousmag
You opened my eyes on the solution

I have been trying for 2 weeks, and I almost gave up!
Thank you again and you made my weekend!

Sami

[famousmag]

So, you solved it?

Don’t use same name for repeats…

[xatares]

You are right!
That was part of the confusion

[xatares]

I’m wondering if there is a way to automate the queries+repeaters on the server side and/or frontend side, by looping through the tree levels other than creating query+repeater for each level?

because each level will apply the same query

SELECT * FROM dep_tree WHERE parent_dep_id = ?

I’m not sure if Wappler can do that.

[Msj1542]

Still related, but pivoting on the scope here some…Was curious if someone might be able to lend some insight here on how someone would set up the inputs/api for a create/update of this same data structure. I had a scenario I was working on this for, and I believe I got it working correctly, but I suspect there is a much better way of doing it by following much of the same steps as above.

[kkoker]

As far as I know, Wappler does not provide the out-of-the-box hierarchical tree structure you have in the example.

However, depending on the level of nesting you have, you can use the dmx-repeat component. You can do a repeat on level 1 and the content of level 1 will also have a dmx-repeat and so on.

You can also use JavaScript to loop through the nested data and create the tree structure manually or use some JS library like tabulator.