Cómo establecer un nombre de propiedad de objeto JS a partir de una variable

178

Necesito establecer un nombre de propiedad de objeto JS dinámicamente.

for(i=1; i<3; i++) {
    var key  = i+'name';

    data = {
        key : 'name1',
    }
}

El resultado debe ser:

data = {
    1name: 'name1'
    2name: 'name1'
}

javascript

— Vinoth Babu
fuente

Si son secuenciales, ¿por qué no está utilizando una matriz?

— epascarello

Quiero saber cuáles de ustedes tres dieron en la flecha equivocada. Vamos, confiesa.

— Charles

1

posible duplicado del uso de una variable para una clave en un objeto literal de JavaScript

— halfer

194

var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}

— cierre
fuente

44

La siguiente respuesta de Musa también articula correctamente que usar la notación [] es en realidad la única forma de hacerlo.

— Dennis Plucinik

1

También tenga en cuenta que la respuesta de @ ChilNut a continuación ahora describe la forma más fácil de hacer esto usando ES6

— rambossa

1

En realidad, con la nueva sintaxis, lo que OP está tratando de lograr solo será posible si el límite del bucle está codificado y es pequeño.

— Musa

168

Tendrá que usar la []notación para establecer claves dinámicamente.

var jsonVariable = {};
for(i=1; i<3; i++) {        
 var jsonKey  = i+'name';
 jsonVariable[jsonKey] = 'name1';

}

Ahora en ES6 puede usar la sintaxis literal de objetos para crear claves de objetos dinámicamente, simplemente ajuste la variable en []

var key  = i + 'name';
data = {
    [key] : 'name1',
}

— Musa
fuente

3

jsonVariable = {}; no debe inicializarse dentro del ciclo for.

— cierre

También estás haciendo que jsonVariable sea global aquí

— Dennis Plucinik

130

Con ECMAScript 6, puede usar nombres de propiedades variables con la sintaxis literal del objeto, como esta:

var keyName = 'myKey';
var obj = {
              [keyName]: 1
          };
obj.myKey;//1

Esta sintaxis está disponible en los siguientes navegadores más nuevos:

Edge 12+ (Sin compatibilidad con IE), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

( https://kangax.github.io/compat-table/es6/ )

Puede agregar soporte a navegadores antiguos utilizando un transpilador como babel . Es fácil transpilar un proyecto completo si está utilizando un paquete de módulos como rollup o webpack .

— chiliNUT
fuente

2

Gracias por agregar la increíble sintaxis de ES6

— rambossa

Sin ES6 no puedo definir var payload = {dynamicKey: val}, necesito hacer var payload = {} y payload [variableName] = val.

— Sainath SR

23

Esta es la forma de establecer dinámicamente el valor

var jsonVariable = {};
for (var i = 1; i < 3; i++) {
    var jsonKey = i + 'name';
    jsonVariable[jsonKey] = 'name' + i;
}

— timc
fuente

20

Use una variable como clave de objeto

let key = 'myKey';

let data = {[key] : 'name1'; }

Vea cómo hacer referencia a su objeto aquí

— Boris Detry
fuente

¿Puede por favor elaborar un poco más para que otros sepan por qué esto podría ser una solución?

— phaberest

La información que agregó está bien, simplemente nunca responda con solo código;)

— phaberest

7

No importa de dónde viene la variable. Lo principal que tenemos es ... Establecer el nombre de la variable entre corchetes "[..]".

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}

— Knut Hering
fuente

Esto funciona bien, me pregunto si funciona en todos los navegadores / versiones

— Mercury

1

jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

esto será similar a

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}

— suman
fuente

0

En la línea del comentario anterior de Sainath SR, pude establecer un nombre de propiedad de objeto js a partir de una variable en Google Apps Script (que todavía no admite ES6) definiendo el objeto y luego definiendo otra clave / valor fuera del objeto:

var salesperson = ...

var mailchimpInterests = { 
        "aGroupId": true,
    };

mailchimpInterests[salesperson] = true;

— Mark Corrigan
fuente