javascript - Jquery 从输入映射复杂数组

标签 javascript jquery

我需要映射一个输入数组以通过 ajax 调用传递。输入如下所示:

<input type="hidden" name="sizes[0][id]" value="0" class="sizes">
<input type="hidden" name="sizes[0][name]" value="Small" class="sizes">
<input type="hidden" name="sizes[1][id]" value="1" class="sizes">
<input type="hidden" name="sizes[1][name]" value="Medium" class="sizes">
<input type="hidden" name="sizes[2][id]" value="2" class="sizes">
<input type="hidden" name="sizes[2][name]" value="Large" class="sizes">

我尝试像下面这样映射它,但它不起作用,因为它没有获取 id 或名称字段。

var sizes = $('input.sizes').map(function(){ return $(this).val(); }).get();

也许这需要以某种方式递归?

编辑:输出需要使用以下代码:

$.ajax({
  type  : "POST",
  cache : false,
  data  : {
    sizes: sizes,
    ...
  },
  url   : 'http://what.does.the.fox/say',
  dataType : 'json',
  ...
});

另一个更新:这应该创建一个类似于输入名称标签的对象数组。即:

var sizes = [
  { id: 0, name: 'Small' },
  { id: 1, name: 'Medium' },
  { id: 2, name: 'Large' }
];

最佳答案

我在网上找到了能够按照我想要的方式执行此操作的代码。这也使其完全动态化,因此命名什么字段或有多少字段并不重要。这是我找到的代码here在评论中:

(function(jQuery){

 jQuery.fn.MytoJson = function(options) {

    options = jQuery.extend({}, options);

    var self = this,
        json = {},
        push_counters = {},
        patterns = {
            "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
            "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
            "push":     /^$/,
            "fixed":    /^\d+$/,
            "named":    /^[a-zA-Z0-9_]+$/
        };


    this.build = function(base, key, value){
        base[key] = value;
        return base;
    };

    this.push_counter = function(key){
        if(push_counters[key] === undefined){
            push_counters[key] = 0;
        }
        return push_counters[key]++;
    };

    jQuery.each(jQuery(this).serializeArray(), function(){

        // skip invalid keys
        if(!patterns.validate.test(this.name)){
            return;
        }

        var k,
            keys = this.name.match(patterns.key),
            merge = this.value,
            reverse_key = this.name;

        while((k = keys.pop()) !== undefined){

            // adjust reverse_key
            reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

            // push
            if(k.match(patterns.push)){
                merge = self.build([], self.push_counter(reverse_key), merge);
            }

            // fixed
            else if(k.match(patterns.fixed)){
                merge = self.build([], k, merge);
            }

            // named
            else if(k.match(patterns.named)){
                merge = self.build({}, k, merge);
            }
        }

        json = jQuery.extend(true, json, merge);
    });


    return json;
 }

})(jQuery);

关于javascript - Jquery 从输入映射复杂数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23396890/

相关文章:

javascript - jQuery:绑定(bind)2个事件并只执行一个

Javascript:编辑表单字段的值?

JavaScript 在一个请求中处理不同的内容类型

javascript - datatables-editable 插件在数据表中动态添加行后不起作用

javascript - 使用 JavaScript 通过一些查询字符串将用户重定向到当前页面

jQuery 删除除特定 ID 之外的类元素

javascript - 将 jQuery 与 angular 2+ 一起使用好吗

jquery 滚动 + 可拖动项目

javascript - 如果鼠标悬停在第一个或第二个 div 上,则保持第二个 div 可见

javascript - 将列的鼠标悬停区域限制为其自身形状与周围区域