Como definir um nome de propriedade de objeto JS de uma variável

178

Preciso definir um nome de propriedade de objeto JS dinamicamente.

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

    data = {
        key : 'name1',
    }
}

O resultado deve ser:

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

javascript

— Vinoth Babu
fonte

Se eles são seqüenciais, por que você não está usando uma matriz?

— epascarello 12/12/12

Quero saber quais de vocês três acertaram a flecha errada. Vamos, confesse.

— Charles

1

possível duplicata usando uma variável para uma chave em um objeto literal JavaScript

— halfer

194

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

— fecho
fonte

4

A resposta de Musa abaixo também articula corretamente que o uso da notação [] é realmente a única maneira de fazê-lo.

— Dennis Plucinik

1

Observe também que @ resposta de ChilNut abaixo agora descreve a maneira mais fácil de fazer isso usando ES6

— rambossa

1

Na verdade, com a nova sintaxe, o que o OP está tentando alcançar só será possível se o limite do loop for codificado e pequeno.

— Musa

168

Você precisará usar a []notação para definir chaves dinamicamente.

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

}

Agora no ES6, você pode usar a sintaxe literal do objeto para criar chaves de objeto dinamicamente, basta agrupar a variável em []

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

— musa
fonte

3

jsonVariable = {}; não deve ser inicializado dentro do loop for.

— fechamento

Além disso, você está tornando o jsonVariable global aqui

— Dennis Plucinik

130

Com o ECMAScript 6, você pode usar nomes de propriedades variáveis com a sintaxe literal do objeto, assim:

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

Essa sintaxe está disponível nos seguintes navegadores mais recentes:

Edge 12+ (sem suporte para IE), FF34+, Chrome 44+, Opera 31+, Safari 7.1+

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

Você pode adicionar suporte a navegadores mais antigos usando um transpiler como o babel . É fácil transpilar um projeto inteiro se você estiver usando um empacotador de módulo, como rollup ou webpack .

— chiliNUT
fonte

2

Obrigado por adicionar o incrível sintaxe ES6

— rambossa

Sem o ES6, não posso definir var payload = {dynamicKey: val}, preciso fazer var payload = {} e payload [variableName] = val.

— Sainath SR

23

Esta é a maneira de definir dinamicamente o valor

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

— timc
fonte

20

Use uma variável como uma chave de objeto

let key = 'myKey';

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

Veja Como iterar no seu objeto aqui

— Boris Detry
fonte

Você pode elaborar um pouco mais para que os outros saibam por que isso pode ser uma solução?

— Phaberest #

A informação que você adicionou estão bem, apenas nunca dar uma resposta com apenas código;)

— phaberest

7

Não importa de onde a variável vem. Principal coisa que temos um ... Defina o nome da variável entre colchetes "[..]".

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

— Knut Hering
fonte

Isso funciona bem, eu me pergunto se ele funciona em todos os navegadores / versões

— Mercury

1

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

isso será semelhante a

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

— suman
fonte

0

De acordo com o comentário do Sainath SR acima, pude definir um nome de propriedade de objeto js a partir de uma variável no Script do Google Apps (que ainda não suporta o ES6), definindo o objeto e definindo outra chave / valor fora do objeto:

var salesperson = ...

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

mailchimpInterests[salesperson] = true;

— Mark Corrigan
fonte