# Iterate walk thru tree component

**URL:** <https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 9, 2023, 8:43pm UTC](https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935 "2023-12-09T20:43:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [December 9, 2023, 8:43pm UTC](https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935/1 "2023-12-09T20:43:03Z")

</div>

How to iterate walk through recursively the perspective tree below  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/eeacd1385fc0fa2779706ea969eb90e51f9e368e.png)

To output dataset:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/c/acd5f39058f1a74fb8f833f7b101478c7466d9e0.png)

Reason:  
I need to be able to highlight desired label.

`Grandchild 2 is 0/0/1`

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/4/d445d4af264328aeee8c002923389cff934a2845.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [December 10, 2023, 12:50am UTC](https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935/2 "2023-12-10T00:50:33Z")

</div>

Your question is really, "Can someone suggest code to create a list of Tree component item paths and their labels from the tree's `props.items`?"

My question is, "Why would you want to?" It's much more likely that you would be _creating_ the items lists by code (as you have asked in recent questions).

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [December 10, 2023, 1:04am UTC](https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935/3 "2023-12-10T01:04:42Z")

</div>

> [@Transistor](#):
>
> My question is, "Why would you want to?" It's much more likely that you would be _creating_ the items lists by code (as you have asked in recent questions).

On the other part of the view, I have another navigation logic, and I want this to sync with tree logic, be able to highlight the current path on the tree.

Amazingly, I think I am almost there (I hope so), just randomly code:

```auto
	def walk(items, k):
		for i in range(len(items)):
			k+=str(i) + "/"
			system.perspective.print(k)
			system.perspective.print(items[i]['label'])
			if len(items[i]['items']) > 0:
				walk(items[i]['items'], k)
			else:
				system.perspective.print('end ' + k)
			k = k[:len(k)-2]

	listOfObj = self.getSibling("Tree_0").props.items
	k=""
	walk(listOfObj, k)

```

Output:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/0/e09d146fc4d0596a95bc2d547370fff966124315.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 10, 2023, 12:13pm UTC](https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935/4 "2023-12-10T12:13:16Z")

</div>

> [@Eugene49](#):
>
> On the other part of the view, I have another navigation logic, and I want this to sync with tree logic, be able to highlight the current path on the tree.

So you have 2 different navigation schemes, and you want them to be in sync.  
What's the other method ?

Also, just a shot in the dark as we don't know much about your project, but... could the `mainview` page props be enough ?  
I've seen convoluted ways of identifying what view is being displayed in order to highlight something, when all that was really needed was to compare the navigation target of an element to the `mainview` prop. Maybe you're in that situation.

---

<div class="post-metadata">

**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\
**Post date:** [December 11, 2023, 5:20am UTC](https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935/5 "2023-12-11T05:20:33Z")

</div>

This.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/1/e1552b1bdaead41c232735761417a64338011ac7.png)  
Addition to tree, I got a parentBar, and children view. Using flex repeaters.  
When the child is clicked, the new parent will be current parentPath + childPath. And will drive the views and highlight on the tree accordingly.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 11, 2023, 8:22am UTC](https://forum.inductiveautomation.com/t/iterate-walk-thru-tree-component/82935/6 "2023-12-11T08:22:15Z")

</div>

I use this `{this.custom.view} = {page.props.primaryView}` in an expression to highlight the button that corresponds to the current view. `this` is the button, and it has a custom property `view` that's just the path of the view to navigate to.  
If you're using a view based navigation then it should work for you as well. No need to do complicated things from either menu to keep them in sync.