如何创建动态命名的JavaScript对象属性

How to create dynamically named JavaScript object properties?

本文关键字:JavaScript 对象 属性 动态 何创建 创建      更新时间:2023-09-26

我有

<form>
  <input type="text" name="item1" class="grab" value="userInput" />
  <input type="text" name="somethingelse1" class="grab" value="differentUserInput" />
  ... (any number of inputs)
</form>

使用JQuery/Javascript,我想建立一个具有名称值对的对象数组,看起来像这样:

output = [ {item1: userInput}, {somethingelse1: differentUserInput} ... etc.];

我已经试过了,没有成功:

var output = new Array();
$('.grab').each( function(index) { 
    output.push({$(this).attr('name'): $(this).val()} );
});

我已经尝试了几种变化,包括eval()的实验,但无济于事。如果我删除$(this).attr('name'),并给它一个静态名称,它的工作…如何创建动态命名的对象呢?

文字对象语法不能用于非文字键。对对象使用非文字键需要object[keyExpression]表示法,如下所示。(当keyExpression = "key"时,这相当于object.key,但注意前者使用表达式作为键,后者作为标识符。)

var output = []
$('.grab').each(function(index) { 
    var obj = {}
    obj[$(this).attr('name')] = $(this).val()
    output.push(obj)
})

幸福的编码。


还可以考虑使用.map():

var output = $('.grab').map(function() { 
    var obj = {}
    obj[$(this).attr('name')] = $(this).val()
    return obj
})

我只把表单的id作为这个函数的参数:

function form2JSON(form){
    var info_ser = $('#'+form).serialize();
    var data = info_ser.split('&');
    var output = {};
    $.each( data, function( i, l ){
        var data_input = l.split('=');
        output[data_input[0]] = data_input[1];
    });
   return output;
}

结果对象是这样的Object { fieldname="value", fieldname1="value1", fieldname2="value3", ...}