将FORM层次结构反序列化为JS对象

Question

我有一个表单，其中的控件具有代表层次结构的名称。

示例

<form>
    <input name="[field1][0][field11]" value="foobar1" />
    <input name="[field1][0][field12][0][field121]" value="foobar2" />
    <input name="[field2]" value="foobar3" />
    <input name="[field3][0][field31]" value="foobar4" />
    <input name="[field3][1][field32][0][field321]" value="foobar5" />
</form>

我想获取一个表示层次结构的Object，像这样：

{
    "field1": [
        {
            "field11": "foobar1",
            "fiedl12": [
                {
                    "field121": "foobar2"
                }
            ]
        }
    ],
    "field2": "foobar3",
    "field3": [
        {
            "field31": "foobar4"
        },
        {
            "field32": [
                {
                    "field321": "foobar5"
                }
            ]
        }
    ]
}

如何获得？是否有任何原生 JS 或 jQuery 函数来实现这一点？ （.serializeArray() 在这里没有帮助）

---

只是名称结构是标准的，实际名称不会有field-12或field-321这样的索引/em>（唯一的索引位于模式“[field][index]”的第二个方括号中。

[field] 对应于普通字符串值（当不存在 [index] 时）或数组（当 [index] em> 在那里）。

[index] 始终对应于具有以下[]-brackets 集中定义的属性的新对象 ({})。

PS - 请不要使用 jQuery 插件

Answer 1

难度不大。首先获取一个元素数组，拆分名称，然后递归地将它们放入一个对象中。然后输出对象，你就有了你想要的声音。

我承认，这很混乱，我猜可能有更好的方法来做任何你想做的事情。无论哪种方式，以下代码都应该适用于您所描述的内容。

注意：这使用纯 javascript，没有 Jquery 或其他库。

function organizeInputs() {
  var inputs = document.getElementsByTagName('input');  // Get all input elements
  var output = {};
  for (var i=0;i<inputs.length;i++) {           // Iterate through elements
    var keys = inputs[i].name  // Split and format element names to keys
      .split("]")
      .map(function(str) {
        return str.replace("[", "");
      }).filter(function(str) {
        return str.length > 0;
      });
    fillObj(output, keys, inputs[i].value);  // Recursively add to object using keys
  }
  return output;
}

function fillObj(obj, arr, val) {  // Recursively add to object passed
  if (arr.length == 1)
    return obj[arr[0]] = val;
  if (!obj[arr[0]])
    if (arr.length > 1) {
      if (isNaN(arr[1])) {
        obj[arr[0]] = {};
      } else {
        obj[arr[0]] = [];
      }
    } else {
      obj[arr[0]] = {};
    }
  return fillObj(obj[arr[0]], arr.slice(1, arr.length), val);
}

//  To use run organizeInputs()

//  Just for display
var out = document.createTextNode(JSON.stringify(organizeInputs(), null, 2));
document.getElementById("result").appendChild(out);

<form>
  <input name="[field1][0][field11]" value="foobar1" />
  <input name="[field1][0][field12][0][field121]" value="foobar2" />
  <input name="[field2]" value="foobar3" />
  <input name="[field3][0][field31]" value="foobar4" />
  <input name="[field3][1][field32][0][field321]" value="foobar5" />
</form>
<pre id="result"></pre>

Answer 2

这并不像看起来那么容易。收集所有元素，解析名称并使用数组或对象子对象的不同视图迭代新对象。然后应用值。

function getForm(form, object) {
    var a, e = form.elements, i, l;
    for (i = 0; i < e.length; i++) {
        a = e[i].name.match(/([^\[\]]|\[\])+/g);
        l = a.pop();
        a.reduce(function (r, k, j) {
            r[k] = r[k] || (isFinite(a[j + 1] || l) ? [] : {});
            return r[k];
        }, object)[l] = e[i].value;
    }
}

var object = {};
getForm(document.forms.form1, object);
document.write('<pre>' + JSON.stringify(object, 0, 4) + '</pre>');

<form name="form1">
    <input name="[field1][0][field11]" value=" foobar1" />
    <input name="[field1][0][field12][0][field121]" value="foobar2" />
    <input name="[field2]" value="foobar3" />
    <input name="[field3][0][field31]" value="foobar4" />
    <input name="[field3][1][field32][0][field321]" value="foobar5" />
</form>