使用字符串數組鍵轉換對象

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名稱的兩個重要部分，然后使用它們來構建包含對象的數組。 看評論：

 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>