Improve and refactor code of bracket notation PR

Author: fabian-hiller

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the library will be documented in this file.
 
+## vX.X.X (Month DD, YYYY)
+
+- Add support for array bracket notation (pull request #15)
+
 ## v0.7.5 (June 01, 2024)
 
 - Republish previous version because build step was forgotten

README.md

@@ -31,7 +31,9 @@ import { decode } from 'https://deno.land/x/decode_formdata/mod.ts';
 
 `FormData` stores the names of your fields and their values. However, there is a problem. Only strings and files are accepted as values, but complex forms can contain booleans, strings and dates. This leads to the fact that the boolean value `true` must be mapped with `"on"` and `false` values are simply ignored. Numbers and dates are also converted to strings.
 
-Another problem are objects and arrays, which are usually mapped using dot notation. For example, the input field `<input name="todos.0.label" />` should map to the object `{ todos: [{ label: "" }] }`. By telling `decode` where arrays, booleans, dates, files, and numbers are located, the function can decode your `FormData` back into a complex JavaScript object.
+Another problem are objects and arrays, which are usually mapped using dot and bracket notation. For example, the input field `<input name="todos.0.label" />` should map to the object `{ todos: [{ label: "" }] }`. By telling `decode` where arrays, booleans, dates, files, and numbers are located, the function can decode your `FormData` back into a complex JavaScript object.
+
+> Both dot and bracket notation are supported for arrays.
 
 Consider the following form to add a new product to an online store:
 
@@ -46,17 +48,17 @@ Consider the following form to add a new product to an online store:
   <input name="active" type="checkbox" />
 
   <!-- Tags -->
-  <input name="tags[0]" type="text" />
-  <input name="tags[1]" type="text" />
-  <input name="tags[2]" type="text" />
+  <input name="tags.0" type="text" />
+  <input name="tags.1" type="text" />
+  <input name="tags.2" type="text" />
 
   <!-- Images -->
-  <input name="images[0].title" type="text" />
-  <input name="images[0].created" type="date" />
-  <input name="images[0].file" type="file" />
-  <input name="images[1].title" type="text" />
-  <input name="images[1].created" type="date" />
-  <input name="images[1].file" type="file" />
+  <input name="images.0.title" type="text" />
+  <input name="images.0.created" type="date" />
+  <input name="images.0.file" type="file" />
+  <input name="images.1.title" type="text" />
+  <input name="images.1.created" type="date" />
+  <input name="images.1.file" type="file" />
 </form>
 ```
 
@@ -68,15 +70,15 @@ const formEntries = [
   ['price', '0.89'],
   ['created', '2023-10-09'],
   ['active', 'on'],
-  ['tags[0]', 'fruit'],
-  ['tags[1]', 'healthy'],
-  ['tags[2]', 'sweet'],
-  ['images[0].title', 'Close up of an apple'],
-  ['images[0].created', '2023-08-24'],
-  ['images[0].file', Blob],
-  ['images[1].title', 'Our fruit fields at Lake Constance'],
-  ['images[1].created', '2023-08-12'],
-  ['images[1].file', Blob],
+  ['tags.0', 'fruit'],
+  ['tags.1', 'healthy'],
+  ['tags.2', 'sweet'],
+  ['images.0.title', 'Close up of an apple'],
+  ['images.0.created', '2023-08-24'],
+  ['images.0.file', Blob],
+  ['images.1.title', 'Our fruit fields at Lake Constance'],
+  ['images.1.created', '2023-08-12'],
+  ['images.1.file', Blob],
 ];
 ```
 

src/decode.test.ts

@@ -64,7 +64,7 @@ describe('decode', () => {
     expect(decode(formData, { files: ['file'] })).toEqual({ file });
   });
 
-  test('should decode indexed arrays', () => {
+  test('should decode indexed arrays with dot notation', () => {
     const formData = new FormData();
     formData.append('array.0', 'index_0');
     formData.append('array.1', 'index_1');
@@ -98,7 +98,7 @@ describe('decode', () => {
     });
   });
 
-  test('should decode numbers in array', () => {
+  test('should decode numbers in array with dot notation', () => {
     const formData = new FormData();
     formData.append('array.0', '111');
     formData.append('array.1', '222');
@@ -116,7 +116,7 @@ describe('decode', () => {
     formData.append('array[1]', '222');
     formData.append('array[2]', '333');
     expect(
-      decode(formData, { arrays: ['array'], numbers: ['array.$'] })
+      decode(formData, { arrays: ['array'], numbers: ['array[$]'] })
     ).toEqual({
       array: [111, 222, 333],
     });
@@ -130,7 +130,7 @@ describe('decode', () => {
     });
   });
 
-  test('should decode nested arrays', () => {
+  test('should decode nested arrays with dot notation', () => {
     const formData = new FormData();
     formData.append('nested.0.array.0', 'index_0');
     formData.append('nested.0.array.1', 'index_1');
@@ -152,7 +152,7 @@ describe('decode', () => {
     formData.append('nested[0].array[2]', 'index_2');
     expect(
       decode(formData, {
-        arrays: ['nested.$.array', 'empty.array'],
+        arrays: ['nested[$].array', 'empty.array'],
       })
     ).toEqual({
       nested: [{ array: ['index_0', 'index_1', 'index_2'] }],

src/decode.ts

@@ -43,68 +43,83 @@ export function decode<
   const [info, transform] =
     typeof arg2 === 'function' ? [undefined, arg2] : [arg2, arg3];
 
+  // Normalize info arrays to dot notation
+  if (info) {
+    for (const key of [
+      'arrays',
+      'booleans',
+      'dates',
+      'files',
+      'numbers',
+    ] as const) {
+      if (info[key]?.length) {
+        info[key] = info[key]!.map((templateName) =>
+          templateName.replace(/\[\$\]/g, '.$')
+        );
+      }
+    }
+  }
+
   // Create empty values object
   const values: any = {};
 
   // Add each form entry to values
   for (const [path, input] of formData.entries()) {
+    // Normalize path to dot notation
+    const normlizedPath = path.replace(/\[(\d+)\]/g, '.$1');
+
     // Create template name and keys
-    const templateName = path
+    const templateName = normlizedPath
       .replace(/\.\d+\./g, '.$.')
-      .replace(/\.\d+$/, '.$')
-      .replace(/\[\d+\]/g, '.$&')
-      .replace(/\[(\d+)\]/g, '$');
+      .replace(/\.\d+$/, '.$');
     const templateKeys = templateName.split('.');
 
     // Add value of current field to values
-    path
-      .replace(/\[(\d+)\]/g, '.$1')
-      .split('.')
-      .reduce((object, key, index, keys) => {
-        // If it is not last index, return array or object
-        if (index < keys.length - 1) {
-          // If array or object already exists, return it
-          if (object[key]) {
-            return object[key];
-          }
-
-          // Otherwise, check if value is an array
-          const isArray =
-            index < keys.length - 2
-              ? templateKeys[index + 1] === '$'
-              : info?.arrays?.includes(templateKeys.slice(0, -1).join('.'));
-
-          // Add and return empty array or object
-          return (object[key] = isArray ? [] : {});
+    normlizedPath.split('.').reduce((object, key, index, keys) => {
+      // If it is not last index, return array or object
+      if (index < keys.length - 1) {
+        // If array or object already exists, return it
+        if (object[key]) {
+          return object[key];
         }
 
-        // Otherwise, if it is not an empty file, add value
-        if (
-          !info?.files?.includes(templateName) ||
-          (input && (typeof input === 'string' || input.size))
-        ) {
-          // Get field value
-          let output = getFieldValue(info, templateName, input);
-
-          // Transform value if necessary
-          if (transform) {
-            output = transform({ path, input, output });
-          }
+        // Otherwise, check if value is an array
+        const isArray =
+          index < keys.length - 2
+            ? templateKeys[index + 1] === '$'
+            : info?.arrays?.includes(templateKeys.slice(0, -1).join('.'));
+
+        // Add and return empty array or object
+        return (object[key] = isArray ? [] : {});
+      }
 
-          // If it is an non-indexed array, add value to array
-          if (info?.arrays?.includes(templateName)) {
-            if (object[key]) {
-              object[key].push(output);
-            } else {
-              object[key] = [output];
-            }
+      // Otherwise, if it is not an empty file, add value
+      if (
+        !info?.files?.includes(templateName) ||
+        (input && (typeof input === 'string' || input.size))
+      ) {
+        // Get field value
+        let output = getFieldValue(info, templateName, input);
+
+        // Transform value if necessary
+        if (transform) {
+          output = transform({ path, input, output });
+        }
 
-            // Otherwise, add value directly to key
+        // If it is an non-indexed array, add value to array
+        if (info?.arrays?.includes(templateName)) {
+          if (object[key]) {
+            object[key].push(output);
           } else {
-            object[key] = output;
+            object[key] = [output];
           }
+
+          // Otherwise, add value directly to key
+        } else {
+          object[key] = output;
         }
-      }, values);
+      }
+    }, values);
   }
 
   // Supplement empty arrays if necessary