Question

我在表单中有一个表格，每个单元格都包含某种用户输入（文本框，下拉列表，日期选择器）。

<tr>
   <td><input type='text' name='user[0]' /></td>
   <td><input type='text' name='stuff[0]' /></td>
<tr>
   <td><input type='text' name='user[1]' /></td>
...
</tr>

通过调用$ .serializeArray（），我从表单中创建一个数组。

该数组是具有此架构{ 'name':user[n],'value': 'Joe'}的对象数组。

我想从这个数组中动态创建一个对象数组，每一行都作为一个对象。

我希望架构像{ name[n] : value [n] }。例如，html示例中的JSON将是

[{ 
   'user[0]' : 'Joe',
   'stuff[0]' : 'whatever'
},{
   'user[1]' : 'Marc',
   'stuff[1]' : 'other stuff'
}]

等等。

我到目前为止的尝试是将表单数组循环拆分为n数组，表中每行一个，但我无法想出如何创建我想要的JSON。

通过提交表单，我希望将整个表作为JSON发送到Web服务，该服务将其存储在一个表中，其中列的输入具有相同的name。

Answer 1

这是一个函数，它查找作为给定选择器的子节点的所有jQuery :input elements（因此您可以在DOM中的多个位置使用它）。它使用“map”为每个输入项创建名称/值条目，并使用“reduce”将它们合并为一对。

function inputsAsJson(selector) {
  return $(selector).find(':input').map(function() {
    var $input=$(this), obj={};
    obj[$input.attr('name')] = $input.val();
    return obj;
  }).toArray().reduce(function(memo, _, index, source) {
    if ((index % 2) == 0) {
        memo.push($.extend({}, source[index], source[index+1]));
    }
    return memo;
  }, []);
}

// Assuming your target element is a "table" with id "foo"...
inputsAsJson('table#foo') // => [ { "user[0]": "Joe", "stuff[0]": "whatever" }, ... ]

请参阅working JSFiddle here。

从对象数组创建JSON

1 个答案: