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

您的代码可以大大简化。

data-position属性没有意义因为你实际上并没有使用它的价值。你只需要选择所有按共享类（.item）输入组容器，然后输入每个容器，选择所有后代输入。
您的代码构建item元素是多余的。您可以使用内联 object literal / initializer（{...}）代替。

此外，正如@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) 
});

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

1 个答案: