> For the complete documentation index, see [llms.txt](https://mobsted-2.gitbook.io/knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobsted-2.gitbook.io/knowledge-base/basics/introduction/apply_loops_to_screen_elements.md).

# Loops - display multiple line results in app

Use screen elements loops to display resulting arrays of filters and API requests on an app screen. Common example of such arrays is a list of items in a shopping cart or a list of payments.

The platform allows to create loops over:

*  Filter data [\[Step by step example →\]](/knowledge-base/basics/introduction/apply_loops_to_screen_elements.md#displaying-data-from-filters)
* Operation data [\[Step by step example →\]](/knowledge-base/basics/introduction/apply_loops_to_screen_elements.md#displaying-data-from-operations)

In both these examples we will take the following steps:

* Set up data source: Filter or Operation
* Set up loop that will parse the data from the data source
* Call the loop reference and extract its' data.

{% hint style="info" %}
Before proceeding, please make sure that you are familiar with [Hashtags.](/knowledge-base/references/intro-placeholder/hashtags.md)
{% endhint %}

{% hint style="info" %}
Make sure you have accomplished the steps described [Use automatic data filters](/knowledge-base/basics/introduction/use_automatic_data_filters.md) article before implementing the steps below.
{% endhint %}

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

####  DISPLAYING DATA FROM FILTERS

At [previous step](/knowledge-base/basics/introduction/use_automatic_data_filters.md) we have created **AgeEmail** filter that shows users with Gmail account with the age less than specified. Here we create a loop to display Name and Age of all the filtered records.

Steps to take:

1. Navigate to **Constructor**
2. Create new screen by clicking **Add New Screen** at the bottom of the platform
3. Drag and Drop [Text Input](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element
4. Set its' properties:
   * **Backendname** as *Age*
   * **Default Value** as *#Variable:age#*
5. Drag and Drop [Button](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element
6. Set its' properties:
   * **Backendname** as *Button*
   * **Caption Button** as *Less than Age #Backendname:Age#*
7. Click **Actions** button and **Add new action** from drop down:
   * **Set variable** with the **Name:** *Age* and **Value:** *#Backendname:Age#*. Click **Save**
   * Add **Go to** action. Select **Screen** and in **Choose screen** drop down select the screen you are on now. This will reload the page. Otherwise the filter results will not be updated.

<div align="left"><img src="/files/-Lo_4pogdujExc5mWD5d" alt=""></div>

8\. Drag and Drop [Text](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element

9\. Set it's text: *Filtered Data:*

10\. Drag and Drop another [Text](https://kb.mobsted.com/article/ap8iv7mdhw-construstor-elements-build-app) element

11\. Enable looping for that element - find **LOOP** in the right hand side menu and check **Enabled** box

12\. Set up **Data Source:** *#ObjectsFilter:AgeEmail:Data#,* where *AgeEmail* is the name of our Filter

13\. Enter **Loop Name:** *AgeEmailLoop*

14\. Go to **Text** field of the element and set up what will be displayed in each element by pulling the required Object columns from the loop:

* to display Name use *Employee:#Loop:AgeEmailLoop:objects\@Name#*
* to display Age use *Age:#Loop:AgeEmailLoop:objects\@Age#*

15\. Click **Save Screen**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1560403334585/screen-shot-2019-06-13-at-10-20-59-am.png)

16\. Click **Preview** button to launch app from the screen to check it works.

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1560418911316/screen-shot-2019-06-13-at-2-41-25-pm.png)![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1560419021736/image.png)

{% hint style="info" %}
You can have a look at how it's implemented in **Demo App** in your account, screen - **9** **Filters Iterate**.
{% endhint %}

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### DISPLAYING DATA FROM OPERATIONS

We have a screen, where a user can select a country from the drop down and see its' public holidays. For this example, we have pre-created API Operation to the 3rd party service. &#x20;

Steps to take:

1. Drag and Drop [Select](/knowledge-base/references/intro-placeholder/constructor_elements.md#select) element
2. Use **Add Option** and create a list of countries:
   1. **Label** = *USA*\
      **Value** = *US*
   2. **Label** = *Canada*\
      **Value** = *CA*
   3. **Label** = *Brazil*\
      &#x20;**Value** = *BR*
3. Drag and Drop [Button](/knowledge-base/references/intro-placeholder/constructor_elements.md#button) element
4. Set it's properties:
   1. **Backendname** *= holidaysButton*
   2. **Caption Button** *= Check Holidays*
5. Click **Actions,** select **Execute Operations** and add pre-created **Holiday** operation
6. Drag and Drop[ Text](/knowledge-base/references/intro-placeholder/constructor_elements.md#text) element
7. Enable looping for that element: find **LOOP** in the right hand side menu and check **Enabled** box
8. Set up **Data Source** for the loop: *#Operation:Holiday:Response:Result:0:response:holidays#*
9. **Name** the loop as *Holidays*
10. Go to **Text** field of the element and set up what will be displayed by pulling the required array elements from the loop (OPERATION):
    1. *#Loop:Holidays:name#*
    2. *#Loop:Holidays:date:iso#*

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1557327533849/screen-shot-2019-05-08-at-7-48-52-pm.png)

11\. Click **Preview** button to launch app from the screen to check it works.

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1557894888294/screen-shot-2019-05-15-at-9-34-25-am.png)![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/cv0t24tdm6/1557895014599/image.png)

{% hint style="info" %}
You can take a look at how it's implemented in **Demo App** in your account, screen - **13 Operation Loop Screen**.
{% endhint %}

{% hint style="info" %}
**Note:** we only use at sign (@) to reference Object properties (#Loop:AgeEmailLoop:objects\@Age#). When referencing Operation, we use colons only (#Loop:Holidays:date:iso#).
{% endhint %}

####

#### MENTIONED ARTICLES

* [Hashtags](/knowledge-base/references/intro-placeholder/hashtags.md)
* [Operations](/knowledge-base/basics/introduction/use_any_internal_and_external_api.md)
* [Constructor elements](/knowledge-base/references/intro-placeholder/constructor_elements.md)
* [Use automatic data filters](/knowledge-base/basics/introduction/use_automatic_data_filters.md)

#### RECOMMENDED ARTICLES

* [Automate with triggers](/knowledge-base/basics/introduction/automate_with_triggers.md)
* [Smart filters](/knowledge-base/references/intro-placeholder/untitled-1.md)