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
hideEndsIfEmpty	hide tail or header if empty
header	optional markup to put as first item
tail	optional markup to put as last item
empty	optional markup to put if empty

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