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

Question

我目前正在通过 serializeArray() 从可重复的组表单中获取数据，并将其作为具有以下语法的对象：

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);
            }
        }
    }

这显然行不通。

任何帮助表示赞赏

Answer 1

您引用的内容看起来不像 serializeArray 的结果，但是根据我认为您的表单的样子工作，这并不难。主要的是serializeArray 返回一个{name, value} 对象的数组，所以我们只需要隔离group_field 名称的两个重要部分，然后使用它们来构建包含对象的数组。见 cmets：

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>