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

Create multidimensional associative array from form inputs

本文关键字：关联 数组 创建 表单 输入      更新时间：2023-09-26

从表单输入创建多维关联数组的最佳方法是什么？

窗体如下所示：

<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，这将帮助我遍历屏幕上的输入并将它们推送到我列出的多维关联数组中。

你的代码可以简化很多。

  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) 
});
相关文章：