Render list

Renders a list of items from an array.

You can use this action to render third-party data from an API call or hardcoded data from an array that you have created.

Once you set this action up, you'll need to combine it with other actions to populate each item with its own data.

Render list from array

In the function editor, you have to return an array.

Most of the time, you'll be using this action to render a list of data from a request.

Here is an example, where we're getting a list of products from our backend:

(c, f, i, n, r, v, e, t) => {
  return r.get_products.data; 
};

Variable for index

When we're rendering a list of items, we need to specify a variable for index.

You can name your index variable almost anything you want, but i is a common choice. The initial value should be set to 0.

You will use this variable in other actions to refer to the correct item in your array.

Rendering dynamic text in a list

Let's assume that we named our variable i, so we have v.i, and we wanted to add a heading to each product in our rendered list.

We would create a Set text action, and set the value to:

(c, f, i, n, r, v, e, t) => {
  return r.get_products.data[v.i].product_name; 
};

Here is another example, where we're rendering a list of tasks:

Rendering dynamic images in a list

To set an image, we would use the Set HTML attribute action, and set the src attribute to the image url:

(c, f, i, n, r, v, e, t) => {
  return r.get_products.data[v.i].product_image; 
};

Updating and deleting list items

It's not uncommon to create requests to delete or update an item in a list.

Again, we can use the index variable to reference the correct item. Wized is smart enough to recognize which item in the list was clicked, and pass the correct index to our index variable.

You can simply use your index variable in the request like this:

(c, f, i, n, r, v, e, t) => {
  return r.get_products.data[v.i].id; 
};

Let's look at a video example in our todo app:

Rendering nested lists

Whenever you want to render a nested list, make sure to create a new variable for index.

You can name it anything you want, but it's usually called j.

Just make sure it's not the same as the variable in the parent list.

If you want to refer to a nested property, you can do it like this:

(c, f, i, n, r, v, e, t) => {
  return r.get_products.data[v.i].sizes[v.j].tag; 
};

How variable for index works

Whenever we want to access an item within an array, we can do it by specifying the index.

For example, let's say we created a variable called my_array, which contains an array with the following values [10, 25, 30, 40].

The first value in an array has an index of 0, the second has 1, the third has 2, and so on.

So if we wanted to get the number 30 from v.my_array, we can do it like this:

(c, f, i, n, r, v, e, t) => {
  return v.my_array[2]; 
};

Because 30 is the third item in the array, and we're starting at 0.

The variable for index is a dynamic value that always refers to the current item in the rendered list.

Think of the index variable like a bookmark in a book. It helps you keep track of which page you're currently reading, just as i keeps track of which item in a list you're currently processing in a rendered list.

So if we're using our v.my_array variable to render a list of items, and we wanted to set the text for each of our items, we would do it like this:

(c, f, i, n, r, v, e, t) => {
  return v.my_array[v.i]; 
};