從未知數量的輸入字段生成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

基本解決方案- 演示

保持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">

按摩結果轉換成所需的輸出- 最終演示和解答

首先，繼續進行比較容易，將顏色和價格分為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;
}