Overview
An array is an ordered collection of items that organizes your app's data. Each item in an array has a value and an index (order).
Let's start with a simple example. Take the following array:
Amina, Xavier, Saanvi, Luca, Mei, Jamal, Isabella, Tariq, Leila, Kai, Rosa, Youssef, Emily, James, Sarah, Michael
We used that array to populate this list in a Play prototype:
Each item in an array must have the same type. In the array above, the type is strings. If you add an item with a different type than the array type, Play will convert that item to the correct type.
In Play, arrays are stored as variables. Learn how to create an array variable below.
Arrays are common structures across coding languages. Here are some helpful links to help you better understand arrays:
Creating an Array
To create an array, you'll create a new variable with the Array type.
Once your array variable is created, you'll name your array, choose the data type—Number, String, or Boolean—and input the array items. Each item in the array should be separated by a comma. Items are case-sensitive.
In the example below, this "Grocery List" array holds six strings: grapes, grapes, grapes, apple, apple, and banana.
grapes, grapes, grapes, apple, apple, banana
Accessing Values in an Array
To display an array item's value or use an item's value as a property, you'll need to select the item based on its position—AKA index—within the array.
Accessing One Value
Let's use the names array from above:
Amina, Xavier, Saanvi, Luca, Mei, Jamal, Isabella, Tariq, Leila, Kai, Rosa, Youssef, Emily, James, Sarah, Michael
You'll use this expression to get the array item value at a certain index.
#array.item(index)
The index of an array starts at 0 (we know—it's confusing). The first item in the array will have an index of 0, and the second will have an index of 1, and so forth.
This expression will return the value "Amina":
#namesArray.item(0)
You would use the expression above as the Text property of a Set Text action to display an array item in a text element.
Accessing Multiple Value
Let's say you wanted to set each item in the array to a text element in a different card.
You can use a Loop (Children) action before the Set Text action. Instead of using a specific index, you can use "Loop.index" to fill in each array item.
#namesArray.item(Loop.index)
Editing an Array
You can edit the values in an array in two different ways:
Set Array Action
You can modify the array items' values and order (index) using Play's Set Array action. Select the array variable you'd like to adjust, choose the action, and input a number and/or index if applicable. You can add new items to an array, remove items from an array, or sort array items.
To learn more about Set Array actions, check out this support article.
Array Properties in the Expression Editor
You can use properties from an array variable in your project. These Expression Editor properties can be used to display array values, adjust array values, and use array values as properties.
Append
#array.append(item)
Adds an item to the array with the given value.
Count
#array.count
Current number of items in the array.
Contains
#array.contains(item)
Checks if the array contains the given value. Returns a boolean.
Filter Items By
#array.filterBy(value, isMatching)
Remove items that don’t contain the given value. If isMatching is true, remove items that don’t exactly match the given value.
First
#array.first()
Returns the first item in the array.
First Index Of
#array.firstIndexOf(item)
Returns the first index of the given value.
Item
#array.item(index)
Returns the item at the given index.
Is Empty
#array.isEmpty()
Boolean that returns true if the array has no items.
Last
#array.last()
Returns the last item in the array.
Remove
#array.remove(index)
Removes an item from the array at the given index.
Remove All
#array.removeAll()
Removes all items from the array.
Remove First
#array.removeFirst()
Removes the first item in the array.
Remove Last
#array.removeLast()
Removes the last item in the array.
Remove By
#array.removeBy(value, isMatching)
Remove items that contain the given value. If isMatching is true, remove items that exactly match the given value.
Remove First By
#array.removeFirstBy(value, isMatching)
Remove the first item that contains the given value. If isMatching is true, remove the first item that exactly matches the given value.
Remove Last By
#array.removeLastBy(value, isMatching)
Remove the last item that contains the given value. If isMatching is true, remove the last item that exactly matches the given value.
To learn more about the Expression Editor, see this support article.
Resources
Projects