Javascript 从未知数量的输入字段生成JSON

我正在为我的客户webstore创建一个简单的控制面板，我需要将产品颜色选项存储在与表中产品相同的行中

我有两个输入字段：

<input class="form-control" name="color[]" placeholder="Color">
<input class="form-control" name="price[]" type="text" placeholder="0.00">

然而，这里有一个转折点：

我的客户机可以复制这两个输入字段任意多次，我应该从中生成json

 $("input[name='color[]'],input[name='price[]']").serializeArray(); 

只是给我：

[Object Object]

所以我一定是做错了什么。

基本解决方案- 保持jQuery选择器的使用方式：

$("input[name='color[]'],input[name='price[]']").serializeArray();

结果是对象，但这没关系！如果你序列化结果，你会看到你得到了什么。结果不会是你想要的100%。正如你所看到的，所有的输入都在那里，但是没有一个真正可靠的方法来知道哪种颜色配哪种价格

[{"name":"color[]","value":"red"},
 {"name":"price[]","value":"3.00"},
 {"name":"color[]","value":"blue"},
 {"name":"price[]","value":"2.00"}] 

创建分组- 如果编辑命名数组以获得分组号，则可以知道哪些值属于同一组。例如，如果有两个分组，则输入名称如下所示：

<!-- Group 1 -->
<input class="form-control" name="color[0]" placeholder="Color">
<input class="form-control" name="price[0]" type="text" placeholder="0.00">

<!-- Group 2 -->
<input class="form-control" name="color[1]" placeholder="Color">
<input class="form-control" name="price[1]" type="text" placeholder="0.00">

现在我们知道了我们的颜色价格分组：

[{"name":"color[0]","value":"red"},
 {"name":"price[0]","value":"3.00"},
 {"name":"color[1]","value":"blue"},
 {"name":"price[1]","value":"2.00"}] 

维持分组- 通过编程方式添加新输入，我们必须为新输入维护组。只需计算当前颜色输入的数量，并将其用作新值（因为我们的列表是基于零的）

通过颜色循环。对于每种颜色，获取其分组编号。为此，我们将在

name

属性上使用正则表达式。然后，使用该分组编号，找到匹配的价格。要做到这一点，我们必须循环检查价格。这并不像听起来那么慢，很可能这将是我们检查的第一个价格，因为输入是有序的。但我不相信顺序是由

序列化数组

保证的，所以我们循环以防万一。当我们找到匹配的价格时，保存它的值，然后将其从价格数组中删除，排队等待下一个颜色所需的下一个价格

var finalResults = {};
var colors = $("input[name^='color[']").serializeArray();
var prices = $("input[name^='price[']").serializeArray();

var rowPattern = /\[(\d+)\]$/; // Gets the group number inside []
var groupNum = 0;

// For each color, we have to find its matching price
$(colors).each( function(index, input){
    var groupNum = rowPattern.exec(input.name)[1];
    var myPrice = null;

    for(var i=0; i < prices.length; i++){
        if(prices[i].name = "price[" + groupNum + "]"){
            myPrice = prices[i].value;
            // remove price from list for faster future lookups
            prices.splice(i,1);
            break;
        }
    }

    finalResults[input.value] = myPrice;
});

finalResults = {"Colors": finalResults};  
console.log(JSON.stringify(finalResults));

var finalResults={}；
var colors=$（“输入[name^='color[']”）serializeArray（）；
var prices=$（“输入[name^='price[']”）serializeArray（）；
var rowPattern=/\[（\d+）\]$//；//获取[]内的组号
var-groupNum=0；
//对于每种颜色，我们必须找到它的匹配价格
$（颜色）。每个（功能）（索引、输入）{
var groupNum=rowPattern.exec（input.name）[1]；
var myPrice=null；
对于（变量i=0；i

将表单序列化：

console.log(JSON.stringify($("form").serializeArray()));

或者，您可以保留当前逻辑，并将其严格化：

console.log(JSON.stringify($("input[name='color[]'],input[name='price[]']").serializeArray()));

例如，这把小提琴：

---

您需要在父元素

上使用

.serializeArray（）

，而不是输入字段！但是

serializeArray

可能不会以您期望的格式返回结果。下面是一个按您希望的方式执行此操作的函数。将

的jQuery引用传递给它，如：

createColorJSON($（“#myForm”）

函数createColorJSON（$form）{
var colors=$form.find（“输入[name='color[]']”），
prices=$form.find（“输入[name='price[]']”），
对象={颜色：{}；
如果（colors.length！==prices.length）抛出新错误（“表单元素编号不匹配”）；
对于（变量i=0；i

在该

对象上展开--

是否已填充？

[object object]

是对象的字符串表示形式。.serializeArray（）返回一个对象数组。@tymeJV如何从中展开？

$.jsonPARSE（）

没有真正的帮助。通过将它记录到您的控制台来扩展它，以便您可以查看对象包含的内容。@KevinB我得到了

未捕获的语法错误：意外的标记o

。经过一段时间的尝试和修复后得到了：

[{“name”：“color[]，“value”：“Red”}，{“name”：“price[]，“value”：“5.00”}]

哇，这一次你真的花了不少时间！+1000

<input class="form-control" name="color[3]" placeholder="Color">
<input class="form-control" name="price[3]" placeholder="0.00">

var colors = $("input[name^='color[']").serializeArray();
var prices = $("input[name^='price[']").serializeArray();

var finalResults = {};
var colors = $("input[name^='color[']").serializeArray();
var prices = $("input[name^='price[']").serializeArray();

var rowPattern = /\[(\d+)\]$/; // Gets the group number inside []
var groupNum = 0;

// For each color, we have to find its matching price
$(colors).each( function(index, input){
    var groupNum = rowPattern.exec(input.name)[1];
    var myPrice = null;

    for(var i=0; i < prices.length; i++){
        if(prices[i].name = "price[" + groupNum + "]"){
            myPrice = prices[i].value;
            // remove price from list for faster future lookups
            prices.splice(i,1);
            break;
        }
    }

    finalResults[input.value] = myPrice;
});

finalResults = {"Colors": finalResults};  
console.log(JSON.stringify(finalResults));

console.log(JSON.stringify($("form").serializeArray()));

console.log(JSON.stringify($("input[name='color[]'],input[name='price[]']").serializeArray()));

function createColorJSON($form){
    var colors = $form.find("input[name='color[]']"),
        prices = $form.find("input[name='price[]']"),
        object = {colors:{}};

    if (colors.length !== prices.length) throw new Error('Form element number mismatch');

    for (var i = 0; i < ilength; i++){
        var color = colors.eq(i).val(),
            price = prices.eq(i).val();
        object.colors[color] = price;
    }

    return object;
}