Path Operators

Learn how to navigate and access specific elements or properties within a data set using JSONata path operators. Discover the powerful capabilities of operators like Map, Filter, Order-by, Reduce, Wil

JSONata path operators are used for navigating and accessing specific elements or properties within a data set.

Path operators

The operators include:

• . (Map)

• [ ... ] (Filter)

• ^( ... ) (Order-by)

• { ... } (Reduce)

• * (Wildcard)

• ** (Descendants)

• % (Parent)

• # (Positional variable binding)

• @ (Context variable binding)

Configuration

Result	Expression
Filter a list according to a value	=$filter(@ctx.datasources.filter-list, function($v){$contains($string($v.status), $string(@ctx.components.filter-list.state.filter != null ? @ctx.components.filter-list.state.filter:'all')) })[] See When using a filterbest practice.

Be careful when using complex expressions, such as expressions that iterate one datasource across another, as your solution performance could become slower. To avoid this, try to use the datasource queries to get the desired result rather than an expression.

Examples and code snippets

Filtering data

Static filter

In this example the Filter path operator is used to create a filter for data records marked as Active or Inactive. Example: See the full code sample in GitHub.

filter.jigx

title: Filter, progress and label 
type: jig.list
  
datasources:
  filter-list:
    type: datasource.static
    options:
      data:
        - title: Title 1
          subtitle: Subtitle - active
          status: 'active'
          progress: 0.2
        - title: Title 2
          subtitle: Subtitle - active
          status: 'active'
          progress: 0.56
        - title: Title 3
          subtitle: Subtitle - inactive
          status: 'inactive'
          progress: 0.8
        - title: Title 4
          subtitle: Subtitle - inactive
          status: 'inactive'
          progress: 0.3
        - title: Title 5
          subtitle: Subtitle - active
          status: 'active'
          progress: 0.1
        - title: Title 6
          subtitle: Subtitle - inactive
          status: 'inactive'
          progress: 0.9

filter:
  - title: All
    value: "all"
  - title: Active
    value: active
  - title: Inactive
    value: inactive
      
data:
  =$filter(@ctx.datasources.filter-list, function($v, $a, $i) { @ctx.jig.state.filter = "all" or $v.status = @ctx.jig.state.filter })[]
    
item: 
  type: component.list-item
  options:
    title: [email protected]
    subtitle: [email protected]
    progress: [email protected]
    color:
      - when: [email protected] = 'active'
        color: color2
      - when:  [email protected]  = 'inactive'
        color: color4
    label:
      title: Label active
      isHidden: [email protected]  = 'inactive'
      color:
        - when: [email protected] = 'active'
          color: color2

Searching data

Write an expression to add a search field when using static data. The character [] at the end is very important. Even one item only will be displayed.

Search: See the full code sample in GitHub.

Search static data

search.jigx

children:
  - type: component.list
    instanceId: listOfEmployees
    options:
      isSearchable: true
      data: =$filter(@ctx.datasources.employees, function($v){@ctx.datasources.employees ? $contains($string($v.name),$string(@ctx.components.listOfEmployees.state.searchText != null ? @ctx.components.listOfEmployees.state.searchText:'')) :true})[]
      maximumItemsToRender: 8
      item: 
        type: component.list-item
        options:
          title: [email protected]
          subtitle: [email protected]
          leftElement: 
            element: avatar
            text: N/A
            uri: [email protected]