hx-vals + json-enc: first-level empty array is dropped

[metametadata]

htmx.org 2.0.10, json-enc 2.0.3.

In my case this bug breaks some cases of the programmatic population of hx-vals. E.g. as in the example from the docs: hx-vals='js:{...foo()}' where foo() returns a map where some first-level value is [].

Steps

See https://jsfiddle.net/r4sgw3nh:

<script src="https://unpkg.com/htmx.org@2.0.10"></script>
<script src="https://unpkg.com/htmx-ext-json-enc@2.0.3/json-enc.js"></script>

<button type="button" hx-ext="json-enc" hx-post="/test" hx-vals='js:{
  "firstLevel": [],
  "secondLevel": {
    "values": []
  }
}'>
Click me
</button>

1. Click Click me.
2. Inspect the made request payload in the browser devtools.

Actual

{"secondLevel":{"values":[]}}

Expected

{"firstLevel":[],"secondLevel":{"values":[]}}

[access0r]

Unsubscribe me please

…

On Tue, Jun 16, 2026 at 4:20 PM Yuri Govorushchenko < ***@***.***> wrote: *metametadata* created an issue (bigskysoftware/htmx#3845) <#3845> htmx.org 2.0.10, json-enc 2.0.3. This bug breaks some cases of the programmatic population of hx-vals. E.g. as in the example from the docs <https://htmx.org/attributes/hx-vals/>: hx-vals='js:{...foo()}' where foo() returns a map where some first-level value is []. ` Steps See https://jsfiddle.net/r4sgw3nh: <script ***@***.***"></script><script ***@***.***/json-enc.js"></script> <button type="button" hx-ext="json-enc" hx-post="/test" hx-vals='js:{ "firstLevel": [], "secondLevel": { "values": [] }}'> Click me</button> 1. Click Click me. 2. Inspect the made request payload in the browser devtools. Actual {"secondLevel":{"values":[]}} Expected {"firstLevel":[],"secondLevel":{"values":[]}} — Reply to this email directly, view it on GitHub <#3845?email_source=notifications&email_token=AJI5VNQEVXGCV43BUNKU7CD5AHI4JA5CNFSL4Z3JMQ5C6L3HNF2C22DVMIXUS43TOVSS6NBWG44DMMBXGU3DNJTSMVQXG33OVJZXKYTTMNZGSYTFMSSWK5TFNZ2KYZTPN52GK4S7MNWGSY3L>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJI5VNTVK6FH3TUL53DAGCL5AHI4JAVCNFSNUABFKJSXA33TNF2G64TZHMZDKNJTG44DQMJWHNEXG43VMU5TINRXHA3DANZVGY3KC5QC> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/AJI5VNQTQ4ESYPZOWPQY3HD5AHI4JA5CNFSL4Z3JMQ5C6L3HNF2C22DVMIXUS43TOVSS6NBWG44DMMBXGU3DNJTSMVQXG33OVJZXKYTTMNZGSYTFMSSWK5TFNZ2KUZTPN52GK4S7NFXXG> and Android <https://github.com/notifications/mobile/android/AJI5VNV2LGIHKG2JYWVDGOT5AHI4JA5CNFSL4Z3JMQ5C6L3HNF2C22DVMIXUS43TOVSS6NBWG44DMMBXGU3DNJTSMVQXG33OVJZXKYTTMNZGSYTFMSSWK5TFNZ2K4ZTPN52GK4S7MFXGI4TPNFSA>. Download it today! You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[metametadata]

Unsubscribe me please

Not sure I understand you.

[MichaelWest22]

Yeah i'm not sure how they got the notification email for this issue creation and replied to it which is how you submit comments into the issue thread. to unsubscribe you need to follow the link in the original email to toggle your subscribe status.

On the issue raised the issue is the firstlevel [] array is being processed as form data first and the conversion into form data has to handle arrays specially and it is designed to handle "firstlevel": ["a","b"] type arrays and to do this it detects the key is an array and then for each element in the array pushes 'a' and then 'b' into the formdata as two values of the same key to meet formData syntax.
But in the [] edge case there is nothing to add so it just does nothing as by design you are asking it to pass no values to the formdata for this key.
Then during the json-enc stage the original js is re-executed and it converts the formData parameters into object format but wihtout this key as it had no value in formData and then for each key it copies over the hx-vals raw value to restore non string types. But because there was no value converted to a string already there is nothing to upgrade back to the JS value.

the current extension:
https://github.com/bigskysoftware/htmx-extensions/blob/main/src/json-enc/json-enc.js
has this code:

 const vals = api.getExpressionVars(elt)
      Object.keys(object).forEach(function(key) {
        // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types
        object[key] = Object.hasOwn(vals, key) ? vals[key] : object[key]
      })

and then there is the newer htmx 4 version where we have:
https://github.com/bigskysoftware/htmx-4-community-extensions/blob/main/src/json-enc/json-enc.js
which uses:

      // Restore original types from hx-vals
      if (detail.ctx.vals) {
        Object.assign(object, detail.ctx.vals);
      }
      

which i think should work fine in htmx4