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"
          }
        }
      }