10.7 Add Loop
Description: This attribute is used to display the same element multiple times with different values.
Components to accept the input: Switch and input text.
When user enables the switch, it displays an input text named as “Looping variable name” as shown in the below image.
In the below example, User has a template, which displays the name, city and mobile number of the three user s.
- Writing the template 3 times for three users, which is quite cumbersome and will produce unnecessary redundancy in code.
- Writing the template once, and using it 3 times for three user s which can be achieved using add loop attribute
Usage: Assume user has a normal container (For container refer Container element) and all the fields(name, city and mobile number) are wrapped inside this container.
The user details are stored in the variable “user _data”:
user _data = [{name: “James Smith”, city: “New York”, mobileNo: 3454654},
{name: “Christopher Robin”, city: “Manhattan”, mobileNo:4758945},
{name: “William Turner”, city: “London”, mobileNo:7857694}];
Note:
user _data is an array of objects. Each object represents one user. In this array, there are three objects length of this variable is three. Hence, the container will repeat three times.To enable the switch of add loop attribute, and user will enter user _data variable name in the “Looping variable name” input field as shown in the below image.
To know how to add the elements, which are inside the looping variable, (name, city, mobile number) refer to Inside loop attribute section.
Note:
In this example, looping variable has been added to the container. But user can add the looping variable to any element using the same process (For example, input text, anchor tag etc.) In that case, input text and anchor tag will be repeated as many times as the length defined by the looping variable.Parent topic: Available Attributes