Rendering a List of Items in Wized — Web App Fundamentals

let's learn how to render a list of items on the page the first thing we need to do is make sure that we have an array from which the list is going to be rendered in our case we want to render a list of to-do items and we're going to keep it very simple we're not going to get the array from a request in our case we're just going to create the array from scratch all right so let's go to page data and we're going to create this array within a variable so we're going to create a new variable in my case I'm simply going to call it array and I'm going to set the initial value to an empty array like so now whenever we want to create a variable whenever we want to have an output in this code editor we have to use the return statement so we're going to write here return and we're returning an empty array now obviously we can't render a list from an empty array so we're going to populate it with some information so here I'm going to just add three tasks or let's add five tasks so here the first task is going to be install Windows the second task is going to be install Chrome and I'm actually going to put this on a separate line like so next is going to be install ad blocker and I'm going to add a for ring of text which is going to be uninstall Edge which unfortunately is impossible and finally I'm going to write install VPN Perfect all right now that we created an array from which we're going to render our to-do list we can simply close this refresh the page and we're going to build our action that's going to render a list of items so here I'm going to create a new action I'm going to call it render too items under type I'm going to choose element because we are manipulating an element I'm going to select the to-do item here and under action I'm going to select render list here I have to add the array from which the list is going to be rendered this is going to be the variable that I just created so here I'm going to go to variables click on this and also since we're dealing with the code editor we have to write return perfect and we can see here that the result is our array that we created earlier if you're still confused about the term array it's just a set of comma separated values so these are just strings that are separated by a comma perfect and now we have to specify a variable for index now you might be confused still about what is this variable but if you click here on the helper text you can see that you have to select a variable that's going to count the items that have been rendered on the page so here we're going to create a new variable in this case I'm just going to call it I which stands for index and I'm going to write here return zero now this is going to be a counter variable and whenever we are having indexes inside of an array it starts at the index of zero so the first item in the array has an index of zero and then we count from there so the next item has an index of one then two then three and so on and this iterator variable is helping us keep count of which item has been rendered and to which item which text belongs in a list for example all right so this is going to have an initial value of zero and we're simply going to close it now we're going to select this iterator variable or the indexing VAR variable that we just created and we're going to save our action and now if we refresh the canvas we should see five elements here perfect now we just have to replace the text of each of our to-do items with the text that we have in our array so we're going to create a new action for that we're going to call it set text under type I'm going to select element once again under attribute I'm going to choose to do item text and here under settings I'm going to choose set text text type plain text and now I have to add the text from the array to do that I'm going to need both of these variables so the first thing I'm going to do is write return because we want to return a value I'm going to choose the array over here and now if we want to return an element under a certain index we have to write the following square brackets like so and here we can write write a number so if we want to return the item with the index of zero we can write zero and it's going to show the first item in the array if we change it to one it's going to show the second item two third item and so on but since this element is within a list we want to get this value dynamically and this is where this iterator variable comes in so here instead of having a number we're going to add our iterator variable like so the result is just going to show the result of the first item in the array but if we close all of this and we refresh the canvas we can see that each of our to-do items has the correct title now let's recap what we just learned if you want to render a list of items in Wiz you need to have an array from which the list is going to be rendered that can be either a request response which we're going to learn in future videos or it can be an array that you created in a variable then you're going to need to set up a render list action there you're going to specify the array from which the list is going to be rendered and you're going to have to create an index variable which is going to serve as a counter finally we have to replace each and every field that's going to be having Dynamic values within that list that can be text items images Etc and that's pretty much it this is how you render a simp simple list of strings in WIS but normally we wouldn't get a list of strings whenever you request a resource from the server in most cases you get an array of objects these objects then don't have only the name property or the text that we're seeing in the to-do item but they might have the item state for example whether the item has been completed or not or there might be some additional information like to which group or to which user a certain item belongs so let's head back to our page data and let's change the array so it looks a little bit more realistic and then we will see what we have to change in order to have this list being rendered but with object properties instead of just strings of text okay so we're going to go to page data again we're going to open our variable that we created and then inside here we're just going to create an object so here I'm going to use squiggly brackets and inside here we will have key value pairs what this means is that we have a name or a property like task name and then we have also task state which says whether the task has been completed or not or we can call it completed and then it can have true or false so let's quickly create that object here we're going to write task name we're going to copy this over here and then we're going to add a coma at the end and here we're going to add the second property which is going to be is completed and here let's say to some items we're going to add through and to some other bals okay perfect and now what we have to do is duplicate this object structure over here separate them by Comas again just like we did everywhere else and then we're just going to copy this tasks in so I'm just going to duplicate this a few times and I'll cut this values okay I can delete the commas that I don't need anymore I can format the documents so it looks nice and tidy and now I'm going to paste in the strings all right perfect now we have an array of object and this looks pretty much like a response that we would get from the server let's now close the code editor and let's see what changed and here inside we are setting the text to the whole object and this is not really what we want so what we have to do is address this task name property so we're going to go back to our set text action and we're going to modify it so here we are addressing the correct item you can see here that each item is different so this is already working but we have to select this property so the way we're going to do this is to write Dot and here we're going to write task name perfect and now we can see we're getting the tasks name okay perfect and now if we close it we can see our list of items and the other properties we can then later use for styling because for example the completed tasks we want to strike through and the tasks that haven't been completed yet we want to leave as is and that's how you render a list of items in WIS thanks for watching and I'll see you in the next [Music] video

Channel: Wized

Views: 1,612

Keywords: webflow, wized, webapp, javascript, lowcode, nocode, renderlist

Id: m0MANdlPbXw

Length: 10min 48sec (648 seconds)

Published: Wed Nov 22 2023