htmx-jsonata

htmx extension that provides jsonata query functionality for htmx elements

<!-- ... include jsonata -->
<!-- ... include htmx -->
<script src="https://unpkg.com/@muscara/htmx-jsonata"></script>

attributes

• jn-url (required): the url to fetch data from.
• jn-query: jsonata expression to filter and transform the data
• jn-each: marks an element as a template to be cloned for each item in an array response.

templating

use ${...} syntax to reference data properties directly:

<div jn-url="..." jn-query="...">
  <ul>
    <li jn-each>
      <p>${name} - ${status}</p>
    </li>
  </ul>
</div>

properties support dot notation: ${user.address.city}

to reference an array as the root, insert the index: ${[0].username}

example

<div
  jn-url="https://status.powerschool.com/api/v2/summary.json"
  jn-query="
    components.(
      $ConvertDate := function($date) {
        $toMillis($date) ~> $fromMillis('[M]/[D]/[Y]')
      };

      {
        'name': name,
        'status': status,
        'updated': $ConvertDate(updated_at)
      }
    )
  "
>
  <ul>
    <li jn-each>
      <p>
        ${name}
        <strong>${status}</strong>
        <small>
          <em>
            (last updated: ${updated})
          </em>
        </small>
      </p>
    </li>
  </ul>
</div>

playground

for live examples, use the playground