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'
}
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

Respuestas:

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