Expressions

Path Operators

8min

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:'')) })[]
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. 
See the full code sample in GitHub.
filter.jigx
|
children:
  - type: component.list
    instanceId: listFilter
    options:
      filter:
        - title: All
          value: ' '
        - title: Active
          value: active
        - title: Inactive
          value: inactive
      maximumItemsToRender: 8
      data: 
=$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:'')) })[]
      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
children:
  - type: component.list
    instanceId: listFilter
    options:
      filter:
        - title: All
          value: ' '
        - title: Active
          value: active
        - title: Inactive
          value: inactive
      maximumItemsToRender: 8
      data: 
=$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:'')) })[]
      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: =@ctx.current.item.name
          subtitle: =@ctx.current.item.position
          leftElement: 
            element: avatar
            text: N/A
            uri: =@ctx.current.item.img
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
﻿
﻿

Updated 19 Sep 2023

Did this page help you?

Date & Time

Functional Programming

Docs powered by

Archbee

TABLE OF CONTENTS

Path operators

Configuration

Examples and code snippets

Filtering data

Searching data

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:'')) })[]

Path Operators

Path operators

Configuration

﻿Examples and code snippets ﻿

Filtering data

Searching data

Examples and code snippets