Expressions
Path Operators

6min
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:'')) })[]
﻿
﻿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. 
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: ""
  - title: Active
    value: active
  - title: Inactive
    value: inactive
      
data:
  =$filter(@ctx.datasources.filter-list, function($v, $a, $i) { @ctx.jig.state.filter = "" 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
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: ""
  - title: Active
    value: active
  - title: Inactive
    value: inactive
      
data:
  =$filter(@ctx.datasources.filter-list, function($v, $a, $i) { @ctx.jig.state.filter = "" or $v.status = @ctx.jig.state.filter })[]
    
item: 
  type: component.list-item
  options:
    title: =@ctx.current.item.title
    subtitle: =@ctx.current.item.subtitle
    progress: =@ctx.current.item.progress
    color:
      - when: =@ctx.current.item.status = 'active'
        color: color2
      - when:  =@ctx.current.item.status  = 'inactive'
        color: color4
    label:
      title: Label active
      isHidden: =@ctx.current.item.status  = 'inactive'
      color:
        - when: =@ctx.current.item.status = '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 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]
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: =@ctx.current.item.name
          subtitle: =@ctx.current.item.position
          leftElement: 
            element: avatar
            text: N/A
            uri: =@ctx.current.item.img
﻿
﻿
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:'')) })[]
Updated 22 Feb 2024
Did this page help you?
Jigx Variables
Predicate Queries
Path Operators

Path operators

Configuration

﻿Examples and code snippets ﻿

Filtering data

Searching data

Examples and code snippets
