Arrays

Handling arrays when saving data to SQL and Dynamic Data require JSONATA expressions to return the data as an array rather than a string.

The operators used for handling arrays are:

• array functions - count

• string function - split

• string function- eval

Dynamic Data Configuration

Usually, data in Dynamic Data is saved as an array, for example, ['value1', 'value2'], but when Dynamic Data returns the data, it is stringified as "['value1', 'value2']". If the data is used in components, for example, to show an intialValue, it is not seen as an array but rather as a string. Use the =$eval before the expression to return the data in an array.

Example

=$eval(@ctx.datasources.profile.food)

dropdown-dd

children:
  - type: component.form
    instanceId: food-selection
    options:
      children:
        - type: component.dropdown
          instanceId: meals
          options:
            label: meal options
            data: [email protected]
      # use eval to return an array on food selected in the dropdown      
            initialValue: =$eval(@ctx.datasources.food.name)
              
            item:
              type: component.dropdown-item
              options:
                title: [email protected]
                value: [email protected]

SQL Configuration

Data is sent as an array, for example, ['value1', 'value2'], SQL then saves the data as; VARCHAR(MAX), for example, 'value1, value2'. If the data is used in components, for example, to show an intialValue, it is not seen as an array but rather as a string. Use the =$split before the expression to return the data in an array.

Example

=$split(@ctx.datasources.profile.food, ',')

dropdown-sql

children:
  - type: component.form
    instanceId: food-selection
    options:
      children:
        - type: component.dropdown
          instanceId: meals
          options:
            label: meal options
            data: [email protected]
            initialValue: =$split(@ctx.datasources.profile.food, ',')
              
            item:
              type: component.dropdown-item
              options:
                title: [email protected]
                value: [email protected]

There could be a scenario where there is only one string inside an array. Use the =$.count to determine if there is only one string in the array or more. If there are more than one, include $.split in the expression.

Example

=$count($split(@ctx.datasource.profile.food, ',')) = 1 ? @ctx.datasources.profile.food:$count($split(@ctx.datasources.profile.food, ',')) >1 ? $split(@ctx.datqasources.food, ','):null

dropdown-sql-count

children:
  - type: component.form
    instanceId: food-selection
    options:
      children:
        - type: component.dropdown
          instanceId: meals
          options:
            label: meal options
            data: [email protected]
# Count to see if there is only 1 string or more           
            initialValue: =$count($split(@ctx.datasource.profile.food, ',')) = 1 ? @ctx.datasources.profile.food:$count($split(@ctx.datasources.profile.food, ',')) >1 ? $split(@ctx.datqasources.food, ','):null
              
            item:
              type: component.dropdown-item
              options:
                title: [email protected]
                value: [email protected]

Create a filtered list from an array of records

Expression-array

We will display a list of people from the array of records, then filter them and display those that have entered a name. We will display their initials as a left avatar and add a label to each list item to display whether they are registered.

Filter an array of records to display specific data and perform expression transformations over the data.

See the full example in GitHub.

advanced-expression.jigx

title: List with advanced Expressions
type: jig.list

datasources:
  people:
    type: datasource.static
    options:
      data:
        - id: 1
          firstname: Mark
          lastname: Dobrew
          email: [email protected]
          mobile: [phone]
          registered: false
        - id: 2
          firstname: Astra
          lastname: Courts
          email: [email protected]
          mobile: [phone]
          registered: false
        - id: 3
          firstname: Jane
          lastname: Doe
          email: [email protected]
          mobile: [phone]
          registered: true
        - id: 4
          firstname: ''
          lastname: ''
          email: [email protected]
          mobile: [phone]
          registered: true

data: [email protected][firstname != '' and lastname != '']
item:
  type: component.list-item
  options:
    title: "[email protected] 
            & ' ' & 
            @ctx.current.item.lastname"
    subtitle: ='Phone:' & @ctx.current.item.mobile
    description: ='Email:' & @ctx.current.item.email
    style:
      isHighlighted: "[email protected] = true 
                      ? true:false"
    label:
      title: "[email protected] = true 
              ? 'Registered':'Not registered'"
      color:
        - when: [email protected] = true 
          color: color2
        - when: [email protected] = false
          color: color4
    leftElement: 
      type: avatar
      text: "=$substring(@ctx.current.item.firstname,0,1) 
            & $substring(@ctx.current.item.lastname,0,1)"