Comment définir un nom de propriété d'objet JS à partir d'une variable

178

J'ai besoin de définir dynamiquement un nom de propriété d'objet JS.

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

    data = {
        key : 'name1',
    }
}

Le résultat doit être:

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

javascript

— Vinoth Babu
source

S'ils sont séquentiels, pourquoi n'utilisez-vous pas un tableau?

— epascarello

Je veux savoir lesquels de vous trois ont frappé la mauvaise flèche. Allez, avoue.

— Charles

1

duplication possible de Utilisation d'une variable pour une clé dans un objet JavaScript littéral

— halfer

194

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

— fermeture
source

4

La réponse de Musa ci-dessous exprime également correctement que l'utilisation de la notation [] est en fait la seule façon de le faire.

— Dennis Plucinik

1

Notez également que la réponse de @ ChilNut ci-dessous décrit maintenant la façon la plus simple de le faire en utilisant ES6

— rambossa

1

En fait, avec la nouvelle syntaxe, ce qu'OP essaie de réaliser ne sera possible que si la limite de boucle est codée en dur et petite.

— Musa

168

Vous devrez utiliser la []notation pour définir les clés de manière dynamique.

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

}

Maintenant, dans ES6, vous pouvez utiliser la syntaxe littérale d'objet pour créer des clés d'objet dynamiquement, il suffit d'envelopper la variable dans []

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

— Musa
source

3

jsonVariable = {}; ne doit pas être initialisé dans la boucle for.

— fermeture

Vous rendez aussi jsonVariable global ici

— Dennis Plucinik

130

Avec ECMAScript 6, vous pouvez utiliser des noms de propriété de variable avec la syntaxe littérale d'objet, comme ceci:

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

Cette syntaxe est disponible dans les nouveaux navigateurs suivants:

Edge 12+ (pas de support IE), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

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

Vous pouvez ajouter une prise en charge aux navigateurs plus anciens en utilisant un transpilateur tel que babel . Il est facile de transpiler un projet entier si vous utilisez un bundler de modules tel que rollup ou webpack .

— chiliNUT
source

2

Merci d'avoir ajouté la superbe syntaxe

— ES6

Sans ES6, je ne peux pas définir var payload = {dynamicKey: val}, je dois faire var payload = {} et payload [variableName] = val.

— Sainath SR

23

C'est la façon de définir dynamiquement la valeur

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

— timc
source

20

Utiliser une variable comme clé d'objet

let key = 'myKey';

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

Voir Comment effectuer une itération sur votre objet ici

— Boris Detry
source

Pouvez-vous s'il vous plaît élaborer un peu plus pour faire savoir aux autres pourquoi cela pourrait être une solution?

— phaberest

Les informations que vous avez ajoutées sont bonnes, ne donnez jamais de réponse avec juste du code;)

— phaberest

7

Peu importe d'où vient la variable. La principale chose que nous en avons un ... Définissez le nom de la variable entre crochets "[..]".

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

— Knut Hering
source

Cela fonctionne bien, je me demande si cela fonctionne dans tous les navigateurs / versions

— Mercury

1

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

ce sera similaire à

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

— suman
source

0

Dans le sens du commentaire de Sainath SR ci-dessus, j'ai pu définir un nom de propriété d'objet js à partir d'une variable dans Google Apps Script (qui ne prend pas encore en charge ES6) en définissant l'objet puis en définissant une autre clé / valeur en dehors de l'objet:

var salesperson = ...

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

mailchimpInterests[salesperson] = true;

— Mark Corrigan
source