hi today I want to show you how to work with nested lists or even more precisely nested arrays in ws and web flow so when you're going to need to render a list inside a list this is what you want to think of you want to think of a skyscraper so this is your skyscraper right here and inside the skyscraper you have floors we have floor one floor two floor three floor four right so we have our floors in the skyscraper or think of it like the seaing the the seaing benches in a football stadium or something like this so you have your skyscraper in here and you have your floors floor one floor two floor three floor four now inside each floor you have a dynamic amount of Apartments of units so you have unit one unit two unit three unit four and then we have even 1 2 3 4 within the second floor and we have 1 2 3 floor 1 2 3 4 in the third floor and we have only three in the fourth floor so this is like the example how you want to think about that we have floors that are being rendered dynamically and within each floor there is a dynamic number of units as well so it's a list of floors and inside the list items of the floor there is a list of units this is a nested array a nested list a list inside of a list now let's take the technical example here this is how the skyscraper looks from a technical perspective we have an array we know that because it has like the square brackets here that is a list that indicates that we are going to work with a list here this is a list of objects there is one object the second object the third object and the fourth object now inside this object we have data so the first part the first floor is just the configurator telling us it's the first floor and that this is the second floor the four the third and the fourth this is just this parameter that tells us the floor Which floor it is now inside the floor as you can see we have the floor in here but inside the floor we have a dynamic amount of unit for example this has four units four four but this has only three so it's a dynamic amount of units that we have inside of a floor so since we are going to render a list inside a list we need to use another list another array an array is basically the data structure for a list and you're going to see we have the square bracket and we have the square bracket and inside side we have objects we have unit 100 unit 200 unit 300 400 and so on and we have that same structure for all of the items so we have this list of floors and inside each floor object we have another list of units and this is a nested array this is a list inside of a list and we want to render this list in W to be the floors and inside each floor we want to only render the dynamic units related to the floor that is Rel related to the list item that we are on right now let me give you an example if I'm on floor one I want to render 1 two 3 four list items the same for 1 2 3 but if I'm on floor four as we can see here floor four we have one item less so we want to have four floor four to have one item less only three items not four as in all of the other ones so this is the setup because we want to dynamically reference it and the way we're going to do that is using two renderless actions and let me wipe out everything I did here and let's start out blank so we have two items that have the wite attribute applied to it and big thanks to CAD gbt for helping me come up with this example uh Json file thank you so much CBT so I have just like a skyscraper in here right that is just a diff block and inside the skyscraper I have the floors and they have the width attribute of floor because I'm going to render them dynamically as the floors and then inside the floor I have the apartment which has the Wis attri of unit because I'm going to render the units the apartments dynamically for each floor inside the floor item that is a nested list now if I go back to W let's click on the floor and let's create the action related to the floor so now I want to go to render list and I want to return just simply our nested array that is the one in the variable that we just talked so extensively about to together now we see we have the data we have the floors with the nested arrays for the units inside of them now we're just going to add an iterator that is just a variable starting with return zero as you can see in here that is an iterator and now I will just be rendering that list so let me refresh and we will see we have a list we clone the floor item four times and we render this dynamically now we want to work on the units so let's create a new action for the unit and let's do a render list action here let's type return and now here comes the magic because we don't want to do something like this where we add zero in here and then we do dot units like this because then if I would do it like this and actually that's not fully working because I don't have an iterator selected yet but if I would do it like this and this is a common beginner mistake I get the same count for all the floors but we know that the fourth floor only has three so what we're doing in this example here we're going to render now the the item for the first floor inside of every of the floors which we don't want because we need to set this dynamically or even if you would leave that out you would just get like an undefined so what we want to do here is we want to add our V iterator because if you look into the structure in our variable again you will see that we're going to render this list now inside of this list we have those items each item is connected to our V iterator because we're when we render the list in in here in the floors we apply the iterator on top of this nested array variable so now when we go in here and render want to render the dynamic units we can just simply oh that was the wrong variable we can just simply add our v. iterator in here and rerender that and let's make sure that everything is set up properly and we would now get for the first item we would get like the first floor of course we have to work with the template item now and I would need to use dot units in this example right here so I get the dynamic units for the first floor now as you can see I'm getting the dynamic values in here I will get the first item has the first floor has four units the second floor has four units the third floor has four units but the fourth floor only has three units available so this is how we're going to get this dynamically but now setting text is also something quite interesting so let's really quick go to set text onto the unit and let's just set the text in here now for simplification purposes I'll just take the same setup here because we are already pretty far and now I want to just simply again add our iterator on top of here okay just like that and I want to do dot unit right now we have 100 and so on now if I'm going to rerender that we will see that we have quite some issue here because the first floor will show 100 100 100 100 the second floor will show 600 600 600 and so on so something isn't quite right and we should actually do that lowercase or now we need to do this uppercase because I made a typo in my array but that is not the issue the issue is that we need to use a secondary iterator now because we applied the iterator to this list which is great but it is hindering us now from rendering those floors dynamically because we're just duplicating the data from the first floor all the time so actually we render those floors dynamically but the data we're getting to set the text inside of the floor is only for the first floor item so in order to get that data dynamically we need to create a secondary a second iterator that is unaffiliated with the render list action so that we can get that dynamically and here this is how we're going to do that and why while we're already doing that we may just actually replace the secondary iterator to the secondary iterator just to make sure um so when we render the list inside of here best practices is moving that to the secondary iterator as well but it will not resolve our issue here but what will resolve the issue is replacing the V iterator that we're going to apply on the nested array with our secondary iterator now you will see that of course I did a bad web Flow Design here and I didn't calculate any margin in which let me fix that right now but we solved that issue as well so let's add a little bit in here let's do 0.35 and we do Ram so that it also looks beautiful but this is how we solved that issue this is how we're going to get look look at that how great that looks now this little margin did a whole lot for me and we have 100 200 300 4 00 uh 500 600 700 800 900,000 1,100 1,200 1,300 1,400 1,500 now you say why isn't that 1 2 3 4 5 that's just because the way I did that I set the webflow stuff up because WIS is just following the patterns how you set that up in web flow so that was just that that is on to me the way I set up this Grid in webflow now thinking back back I could just do this as a GD just like this and then it would be different because now also something very valuable when you render list to know the way you set up the structure in web flow will heavily determine the way that those lists are being rendered in WIS WIS is just following the guides and the HTML principles that you lay as as the foundation for ways to do its job so you always got to got to also have that layout working but this is how you're going to do a nested list an array inside of an array and we're going to get the dynamic data in here so thank you so much for watching thank you so much for all your time I really appreciate that just thank you so much just thank you thank you thank you so much for all your support this really really really means a lot to me and yeah thank you so much for your comments for your wonderful Discord messages and just for being part of this wonderful whis community and so encouraging and so kind in the comments I really appreciate that and this really means a lot to me so thank you so much for watching the videos thank you so much for all your support and see you as always tomorrow bye-bye
