javascript - 从表单输入创建多维关联数组

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

您的代码可以大大简化。

jquery 选择器中的
1. data-position 属性没有意义 因为你实际上并没有使用它的值(value)。你只需要全选 按共享类 (.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) 
});