Concorde functional component — Jsonata. sonic-jsonata reads one data provider, evaluates a JSONata expression on it and writes the result to another data provider. Use it for read-only aggregates such as groups, rankings and totals; use Mix Doc ID: core/components/functional/jsonata/jsonata. Keywords: Concorde, supersoniks, core/components/functional/jsonata/jsonata, jsonata, Jsonata, functional component, sonic-jsonata, web component, derive, inputProvider, $input, outputProvider, formDataProvider, $direction, $append([], …), ( … ), sonic-value. URL: https://concorde.supersoniks.org/core/components/functional/jsonata.

Jsonata

sonic-jsonata reads one data provider, evaluates a JSONata expression on it and writes the result to another data provider. Use it for read-only aggregates such as groups, rankings and totals; use Mix to compose data in both directions, and derive for several inputs or a TypeScript function.

Group and sort

inputProvider is available as $input and the result is written to outputProvider. Each field of the optional formDataProvider store becomes a variable ($direction here): changing it recomputes the output without fetching again.

JSONata returns a single object instead of an array when only one item matches. Wrap the expression in $append([], …) when a list renders the output.

Totals

A ( … ) block declares local variables and returns an object; read its fields with sonic-value. Change the reserve to recompute the block fuel.

States

The evaluation state is published on {outputProvider}/_state_ as { status, error }, with status among loading · ready · empty · error. Display it with States.

<div serviceURL="/docs-mock-api">
      <sonic-fetch dataProvider="jsonataStateFlights" endPoint="flights" key="flights"></sonic-fetch>
      <sonic-jsonata
        inputProvider="jsonataStateFlights"
        outputProvider="jsonataLanded"
        expression='{"landed": $count($input[status="landed"])}'
      ></sonic-jsonata>
      <sonic-states dataProvider="jsonataLanded/_state_" data-path="status">
        <template data-value="loading">Counting flights…

API reference

Attribute	Values	Description
`inputProvider`	string	Source data provider, bound to `$input`. Required
`outputProvider`	string	Data provider that receives the result. Required
`expression`	JSONata string (max 8,000 characters)	Expression to evaluate. Required
`formDataProvider`	string	Store whose fields become variables (`$name`)
`outputSchema`	object	Light check of the result: `type` and `required` only; a mismatch sets the `error` state

Helper	Description
`$ucFirst(value)`	Upper-cases the first letter
`$currency(value, locale?, currency?)`	Formats a price (default `fr-FR` and `EUR`)
`$percent(value, locale?, digits?)`	Formats a ratio as a percentage (default `fr-FR` and `0` digits)
`$date(value, locale?, optionsJson?)`	Formats a date (default `fr-FR`, medium style)
`$toChart(items, labelKey, valueKey, datasetLabel?)`	Converts rows to `{ labels, datasets }` for a chart

Expressions have no access to the DOM or the network.

No slots.