Question

我目前正在通过group_field[0][address]:"street one" group_field[0][number]:"10000" group_field[0][city]:"nyc" group_field[1][address]:"street two" group_field[1][number]:"600" group_field[1][city]:"washington" group_field[2][address]:"street three" group_field[2][number]:"34000" group_field[2][city]:"paris"将可重复组表单中的数据作为对象使用此语法：

group_fields = [
   "0": {
       "address": "street one",
       "number": "10000",
       "city": "nyc",
   },
   "1": {
       "address": "street two",
       "number": "600",
       "city": "washington",
   },
   "2": {
       "address": "street three",
       "number": "34000",
       "city": "paris",
   },
}

我正在尝试将其转换为多维数组或嵌套对象结构，以根据第一个方括号之间的索引对所有字段进行分组。

期望的输出：

var values = {};
var params = {};

$.each(theForm.serializeArray(), function(i, field) {
  values[field.name] = decodeURIComponent(field.value);
});

for (var key in values){
        if (values.hasOwnProperty(key)) {
            var matches = key.match(/[^[\]]+(?=])/g);
            if(matches != null  && matches.length > 0) {
                var index = matches[0];
                var theKey = matches[1];
                var theVal = values[key];
                var single = {
                          [theKey]: theVal,
                        }
                params[matches[0]].push(single);
            }
        }
    }

我已经尝试了几件事，我会在很多不同的方法之后写下我的最后一点：

{{1}}

这显然不起作用。

任何帮助表示赞赏

Answer 1

你所引用的内容看起来不像是serializeArray的结果，但是根据我认为你的形式看起来，它并不那么难。主要的是serializeArray返回{name, value}个对象的数组，所以我们只需要隔离group_field名称的两个重要部分，然后使用它们来构建我们的数组。在它里面。见评论：

var theForm = $("form");
// Create the array
var group_fields = [];
// Loop through the fields
theForm.serializeArray().forEach(function(entry) {
  // Get the index and prop name from the entry name
  var nameparts = /^group_field\[(.+)\]\[(.*)\]$/.exec(entry.name);
  // Get the group entry if we already have it
  var group = group_fields[nameparts[1]];
  if (!group) {
    // We don't, create and add it
    group = group_fields[nameparts[1]] = {};
  }
  // Set the property (address, street, etc.)
  group[nameparts[2]] = entry.value;
});
console.log(group_fields);

.as-console-wrapper {
  max-height: 100% !important;
}

<form>
    <input type="hidden" name="group_field[0][address]" value="street one">
    <input type="hidden" name="group_field[0][number]" value="10000">
    <input type="hidden" name="group_field[0][city]" value="nyc">
    <input type="hidden" name="group_field[1][address]" value="street two">
    <input type="hidden" name="group_field[1][number]" value="600">
    <input type="hidden" name="group_field[1][city]" value="washington">
    <input type="hidden" name="group_field[2][address]" value="street three">
    <input type="hidden" name="group_field[2][number]" value="34000">
    <input type="hidden" name="group_field[2][city]" value="paris">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者使用ES2015 +（因为您在原始尝试的解决方案中使用了计算属性名称）：

const theForm = $("form");
// Create the array
const group_fields = [];
// Loop through the fields
theForm.serializeArray().forEach(entry => {
  // Get the index and prop name from the entry name
  const [ , index, prop] = /^group_field\[(.+)\]\[(.*)\]$/.exec(entry.name);
  // Get the group entry if we already have it
  var group = group_fields[index];
  if (!group) {
    // We don't, create and add it
    group = group_fields[index] = {};
  }
  // Set the property (address, street, etc.)
  group[prop] = entry.value;
});
console.log(group_fields);

.as-console-wrapper {
  max-height: 100% !important;
}

<form>
    <input type="hidden" name="group_field[0][address]" value="street one">
    <input type="hidden" name="group_field[0][number]" value="10000">
    <input type="hidden" name="group_field[0][city]" value="nyc">
    <input type="hidden" name="group_field[1][address]" value="street two">
    <input type="hidden" name="group_field[1][number]" value="600">
    <input type="hidden" name="group_field[1][city]" value="washington">
    <input type="hidden" name="group_field[2][address]" value="street three">
    <input type="hidden" name="group_field[2][number]" value="34000">
    <input type="hidden" name="group_field[2][city]" value="paris">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用字符串数组键转换对象

1 个答案: