Iterator

Iterating a list from an interator and place it in a grid. In this example, we are iterating a list of dispatches from a dispatch bucket

{
  "data": {
    "sources": [
      {
        "id": "submissions",
        "kind": "dispatch",
        "query": "given dispatch-bucket {dispatch.id} [submissions]"
      }
    ]
  },
  "ux": {
    "component": "grid",
    "options": {
      "scroll": true
    },
    "styles": {
      "padding": "0px 15px 0px 15px",
      "width": "100vw",
      "backgroundColor": "#F6E8FF"
    },
    "children": [
      {
>>>      "component": "grid",
        "child": {
>>>       "component": "iterator",
>>>       "dataSource": "submissions",
          "child": {
            "component": "grid",
            "direction": "row",
            "justifyContent": "space-between",
            "alignItems": "center",
            "styles": {
              "borderRadius": "8px",
              "backgroundColor": "#fff",
              "padding": "10px",
              "margin": "5px 0px"
            },
            "children": [
              {
                "component": "grid",
                "direction": "row",
                "span": "expanded",
                "children": [
                  {
                    "component": "profile",
                    "variant": "both",
>>>                 "value": "{dispatch.authorId}",
                    "options": {
                      "size": "42px",
                      "spacing": "15px"
                    },
                    "styles": {
                      "fontSize": "14px",
                      "color": "#000"
                    }
                  }
                ]
              },
              {
                "component": "text",
 >>>            "text": "{dispatch.createdAt | date: MMM D}"
              }
            ]
          }
        }
      }
    ]
  }
}