Fix #119: Fix constructing more complex object with arrays (#126)

* Group FormData parameters before restoring hx-vals/hx-vars type, to prevent duplicating arrays elements in final object

* Simplify

---------

Co-authored-by: Vincent <vichenzo-thebaud@hotmail.com>

src/json-enc/json-enc.js

@@ -14,21 +14,24 @@
     encodeParameters: function(xhr, parameters, elt) {
       xhr.overrideMimeType('text/json')
 
-      const vals = api.getExpressionVars(elt)
       const object = {}
       parameters.forEach(function(value, key) {
-        // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types
-        const typedValue = Object.hasOwn(vals, key) ? vals[key] : value
         if (Object.hasOwn(object, key)) {
           if (!Array.isArray(object[key])) {
             object[key] = [object[key]]
           }
-          object[key].push(typedValue)
+          object[key].push(value)
         } else {
-          object[key] = typedValue
+          object[key] = value
         }
       })
 
+      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]
+      })
+
       return (JSON.stringify(object))
     }
   })

src/json-enc/test/ext/json-enc.js

@@ -143,7 +143,7 @@ describe('json-enc extension', function() {
       xhr.respond(200, {}, 'clicked')
     })
 
-    make(`<form hx-ext="json-enc" hx-post="/test" hx-vals="js:{'obj': {'x': 123}, 'number': 5000, 'numberString': '5000'}">
+    make(`<form hx-ext="json-enc" hx-post="/test" hx-vals="js:{'obj': {'x': 123}, 'number': 5000, 'numberString': '5000', 'array': ['text', 123, {'key': 'value'}]}">
              <button id="btn" type="submit">Submit</button>
           </form>`)
     var btn = byId('btn')
@@ -153,6 +153,7 @@ describe('json-enc extension', function() {
     values.number.should.equal(5000)
     values.numberString.should.equal('5000')
     chai.assert.deepEqual(values.obj, {'x': 123})
+    chai.assert.deepEqual(values.array, ['text', 123, {'key': 'value'}])
   })
 
   it('handles multiple values per key', function() {