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

Question

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

我有这两个输入字段：

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

我想创建一个类似的 JSON 字符串，这样我就可以将它存储在数据库中，以便以后使用：

{"colors":{"Red":"0.00"}}

然而，这里的转折点：

我的客户可以根据需要多次复制这两个输入字段，我应该从中生成 json。

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

只给我：

[Object Object]

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

Answer 1

序列化表单：

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

或者您可以保留当前的逻辑并将其字符串化：

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

例如这个小提琴：

http://jsfiddle.net/8U3hw/3/

Answer 2

基本解决方案 - Demo

让你的 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"}] 

创建分组 - Demo

如果您将命名数组编辑为具有分组编号，那么您将能够知道哪些值属于一起。例如，如果您有两个分组，输入名称将如下所示：

<!-- 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">

现在，我们有一种简单的方法来确定哪种颜色与哪种价格搭配，但我们需要稍微更新一下选择器以考虑数组中有一个数字：

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

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

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

维护分组 - Demo

以编程方式添加新输入，我们必须为新输入维护组。只需计算当前颜色输入的数量并将其用作新值（因为我们的列表是从零开始的）。

$('#addColor').click(function(){
    var numColors = $("input[name^='color[']").length;
    var colorInput = '<input class="form-control" name="color[' + numColors + ']" placeholder="Color" />';
    var priceInput = '<input class="form-control" name="price[' + numColors + ']" placeholder="0.00" />';
    $("#colors").append(colorInput);
    $("#colors").append(priceInput);
});

这会使用正确的组号创建新的输入：

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

按摩结果到所需的输出 - Final Demo & Answer

首先，将颜色和价格分成 2 个不同的数组更容易。我们将使用组号来确定哪种价格与哪种颜色搭配：

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

遍历颜色。对于每种颜色，获取其分组编号。为此，我们将在name 属性上使用正则表达式。然后，使用该分组编号，找到匹配的价格。为此，我们必须遍历价格。这并不像听起来那么慢，很可能这将是我们检查的第一个价格，因为输入是有序的。但我不相信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));

Answer 3

您需要在父<form> 元素上使用.serializeArray()，而不是输入字段！但是serializeArray 可能不会以您期望的格式返回结果。这是一个按您希望的方式执行此操作的函数。将您的 <from> 的 jQuery 引用传递给它，例如：createColorJSON($('#myForm'))。

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