Question

我需要映射一个输入数组以通过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' }
];

Answer 1

我在网上找到了能够按照我的意愿执行此操作的代码。这也使它完全动态，因此命名哪些字段或者有多少字段并不重要。以下是我在评论中找到的代码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);

Answer 2

编辑：这就是你想要的 - http://jsfiddle.net/jayblanchard/2F5vD/3/（现在是新的，并通过适当的引用进行了改进！）

var dataString = '';
dataString += '[';
var inputLength = $('input.sizes').length;
$('input.sizes').each(function(index) {
    if( $(this).is('[name$="[id]"]') ) {
        dataString += '\'' + $(this).val() + '\':';
        dataString += '{ id:' + $(this).val() + ',';
    } else if( $(this).is('[name$="[name]"]') && 0 != inputLength -1 ) {
        dataString += ' name:\'' + $(this).val() + '\'},';
    } else {
        dataString += ' name:\'' + $(this).val() + '\'}';
    }
    inputLength--;
});
dataString += ']';

它产生以下输出（现在将传递JSLint） -

[{"0":{ "id":"0", "name":"Small"},"1":{ "id":"1", "name":"Medium"},"2":{ "id":"2", "name":"Large"}}]

这几乎是使用强力方法来获取JSON字符串，并且可能有一些更简单的方法来执行此操作。这可以很容易地移植到一个可以反复调用的函数。我希望它有所帮助。

Answer 3

DEMO

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

jQuery-o-philes的注意事项：在这种情况下this.id与$(this).attr('id')相同，只是我们不需要jQuery来获取id，如果我们已经拥有该元素。与this.name相同。

Jquery映射来自输入的复杂数组

3 个答案:

DEMO