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

Using a child layout with a data source

{
    "component": "iterator",
    "dataSource": "shopping-cart",
    "child": {
        "component": "layout",
        "id": "22491707-a249-41b1-8316-a174f1503b25"
    }
}

Using a child layout with list data

{
    "component": "iterator",
    "list":"1,2,3,4",
    "child": {
        "component": "layout",
        "id": "22491707-a249-41b1-8316-a174f1503b25"
    }
}

Iteratigng script results

Iterating the results of a script that returns JSON data. Use data.$._ to access each element.

{
  "carousel": [
    {
      "week": "1",
      "image": "https://..."
    },
    {
      "week": "2",
      "image": "https://..."
    }
  ]
}

User interface definiton

{
  "component": "iterator",
  "dataSource": "photos",
  "path": "carousel",
  {
  "component": "grid",
  "direction": "column",
  "justifyContent": "center",
  "alignItems": "center",
  "children": [
    {
      "component": "text",
      "text": "Week {data.$.week}",
      "styles": {
        "textAlign": "center"
      }
    },
    {
      "component": "box",
      "constraints": {
        "width": "35vw",
        "height": "50vw"
      },
      "styles": {
        "width": "35vw",
        "height": "50vw",
        "padding": "10px",
        "boxShadow": "0 4px 20px 0 #f5f5f5 normal"
      },
      "child": {
        "component": "media",
        "kind": "image",
        "optimizeSize": true,
        "src": "{data.$.image}",
        "styles": {
          "image": {
            "clipRadius": 14,
            "width": "35vw",
            "height": "50vw",
            "fit": "cover"
          }
        }
      }
    }
  ]
}
}

Iterating dispacth results

Use dispatch._ to access each property of the dispatch.

{
  "component": "grid",
  "direction": "column",
  "justifyContent": "start",
  "alignItems": "start",
  "child": {
    "component": "iterator",
    "dataSource": "list-buckets",
    "child": {
      "component": "grid",
      "direction": "row",
      "justifyContent": "start",
      "alignItems": "start",
      "children": [
        {
          "component": "text",
          "text": "{dispatch.values.name}"
        }
      ]
    }
  }
}

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