Iterator
An iterator that would iterate the dataSource and render the values using the child component definition
Name | Description |
---|---|
component | iterator |
dataSource | the name/id of the dataSource, this dataSource should be defined in the data.sources section of the layout |
orderBy | Optional sort parameter; values.[dispatch property] |
list | if dataSource is not specified, user can specify a list to be iterate |
child | a child component definition that this iterator will used to render each items as iterate |
filter | filter configuration for the iteration |
Examples
{
"component": "iterator",
"dataSource": "shopping-cart",
"child": {
"component": "layout",
"id": "22491707-a249-41b1-8316-a174f1503b25"
}
}
{
"component": "iterator",
"list":"1,2,3,4"
"child": {
"component": "layout",
"id": "22491707-a249-41b1-8316-a174f1503b25"
}
}
Iterator using inside a grid
In this example, the expression {$source.breakfast.data.messages}
will be evaluated to a list of
[
{
"message": "Hello world"
},
{
"message": "Good bye!"
}
]
{
"component": "grid",
"child": {
"component": "iterator",
"list": "{$source.breakfast.data.messages}",
"child": {
"component": "text",
"text": "{data.message}"
},
"styles": {
"padding": "10px 0px"
}
}
}
Iterator using inside a grid (entries list not a map)
In this example, the expression {$source.breakfast.data.messages}
will be evaluated to a list of below. If the list item is not a map (e.g. text), used data.item
qualifier to access the item
[
"Hello world",
"Good bye!"
]
{
"component": "grid",
"child": {
"component": "iterator",
"list": "{$source.breakfast.data.messages}",
"child": {
"component": "text",
"text": "{data.item}"
},
"styles": {
"padding": "10px 0px"
}
}
}