我正在为我的客户网站商店创建一个简单的控制面板，我需要将产品颜色选项存储在与我表中的产品相同的行中。
我有这两个输入字段：
<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]
所以我一定是做错了。
答案 0 :(得分：1)
序列化表单：
console.log(JSON.stringify($("form").serializeArray()));
或者您可以保留当前的逻辑并将其整合：
console.log(JSON.stringify($("input[name='color[]'],input[name='price[]']").serializeArray()));
例如，这个小提琴：
答案 1 :(得分：0)
保持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">
现在，我们可以通过一种简单的方法来确定哪种颜色与哪种颜色相符，但我们需要更新我们的选择器，以便在数组中包含数字：
$("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"}]
以编程方式添加新输入，我们必须维护新输入的组。只需计算当前的颜色输入数量并将其用作新值（因为我们的列表从零开始）。
$('#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">
首先，将颜色和价格分成两个不同的数组更容易。我们将使用组号来确定哪种颜色与哪种颜色相符：
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));
答案 2 :(得分：0)
您需要在父.serializeArray()元素上使用<form>，而不是输入字段！但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;
}