【问题标题】:Multidimensional form array to JavaScript object多维表单数组到 JavaScript 对象
【发布时间】:2012-11-09 09:36:49
【问题描述】:

我正在开发一个需要输入数据行的 Backbone 应用程序(读取:对象数组)。

我的表格是这样设置的:

<tr>
    <td><input type="text" name="items[][qty]"></td>
    <td><input type="text" name="items[][job_number]"></td>
    <td><input type="text" name="items[][description]"></td>
    <td><input type="text" name="items[][purchase_order]"></td>
</tr>
[...]

具有动态的行数。

我希望能够以以下形式检索数据:

{
    items: [
        {
            qty: [val],
            job_number: [val],
            description: [val],
            purchase_order: [val]
        },
        [...]
    ]
}

我找到的最接近的解决方案是Aaron Shafovaloff,但它不支持输出中的数组(仅限对象)。我可以修改他的代码来做我需要的事情,但我想我会先在这里问,因为没有必要重新发明轮子。

我在我的项目中使用 jQuery 和 Underscore,因此可以访问它们的方法。

【问题讨论】:

    标签: javascript jquery json forms underscore.js


    【解决方案1】:

    查看https://github.com/serbanghita/formToObject

    var myFormObj = new formToObject('myFormId');
    // console.log(myFormObj);
    

    【讨论】:

      【解决方案2】:

      我有这种方式来获取多行文本框:

          aItems = new Array();
          $("table tbody tr").each(function(){
              var $this = $(this);
      
              aItems.push({
                  qty:$this.find('input[name="qty"]').val(),
                  job_number: $this.find('input[name="job_number"]').val(),
                  description:$this.find('input[name="description"]').val(),
                  purchase_order:$this.find('input[name="purchase_order"]').val()
              });
      
          });
      

      这个怎么样:

          aItems = new Array();
          $("table tbody tr").each(function(){
              var items = {};
      
              $(this).find('input').each(function(){
                  items[$(this).attr('name')] = $(this).val();
              }
              aItems.push(items);
      
          });
      

      【讨论】:

      • 这是针对这种确切情况的一个很好的解决方案,但我希望有一个不依赖于底层标记(或需要事先知道字段名称)的解决方案,这样我就可以保持我的代码 DRY并在多个视图中重复使用此方法。理想情况下可以代替 $("#formID").serialize()
      • 没有明确的输入字段怎么办?但我还没有真正尝试过代码..
      • 看起来它应该可以工作,而且它比我尝试使用的 frankencode 简单得多。如果可以,我会测试并接受。
      猜你喜欢
      • 2018-08-09
      • 2020-05-23
      • 1970-01-01
      • 2012-10-07
      • 2013-01-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-18
      相关资源
      最近更新 更多