從表單輸入創建多維關聯數組

Question

從表單輸入創建多維關聯數組的最佳方法是什么？

表單如下所示：

<div id="items">
    <h4>Engraving Text</h4>
    <div class="item" data-position="1">
        <h4 id="engraving-item">Item 1</h4>
        <label>Engraving Line 1: </label>
        <input type="text" class="engraving-input engraving-line1" name="trophy" id="item1-line1">
        <br />
        <label>Engraving Line 2: </label>
        <input type="text" class="engraving-input engraving-line2" name="trophy" id="item1-line2">
        <br />
        <label>Engraving Line 3: </label>
        <input type="text" class="engraving-input engraving-line3" name="trophy" id="item1-line3">
        <br />
    </div>
</div>

如果用戶輸入他們想要多個項目 - 使用前3個作為模板動態地將其他輸入添加到表單。

我正在尋找創建這種類型的數組（例如，如果用戶添加了2個項目）：

var myArray =   {
            item1 :
                [
                    {
                        engraving-line1 : "user entered data",
                        engraving-line2 : "more user data",
                        engraving-line3 : "yep, more data"
                    }
                ],
            item2 :
                [
                    {
                        engraving-line1 : "user entered data",
                        engraving-line2 : "more user data",
                        engraving-line3 : "yep, more data"
                    }
                ]
          };

我曾經寫過這篇文章，但我認為我會朝着錯誤的方向前進，或者至少 - 寫得不好。

var totalItems = $("#quantity_wanted").val();

jsonObj = [];

i=1;

while (i < totalItems){
items = {};
$('.item[data-position="'+i+'"] :input').each(function(){
    var name = $(this).attr("name");
    var engraving = $(this).val();
    item = {}
    item ["name"] = name;
    item ["engraving"] = engraving;
    items.push(item);       
});

jsonObj.push(items) 
i++;    
}

只是尋找幫助編寫javascript的幫助，這將幫助我遍歷屏幕上的輸入並將它們推送到像我列出的那樣的多維關聯數組。

Answer 1

您的代碼可以大大簡化。

1. jquery選擇器中的data-position屬性沒有意義，因為您實際上沒有使用它的值。 您只需按共享類（ .item ）選擇所有輸入組容器，然后為每個容器選擇所有后代輸入。
2. 您的代碼構建item元素是多余的。 您可以使用內聯對象文字/初始值設定項（ {...} ）。

此外，正如@Andy所指出的， items數組應該由數組文字（ [] ）初始化，而不是對象（ {} ）。

所以代碼應如下所示：

var jsonObj = [];
$('div.item').each(function(){
    var items = [];
    $(this).find('input').each(function() {
        items.push({
            name: $(this).attr("name"), engraving: $(this).val()
        });       
    });
    jsonObj.push(items) 
});