So legen Sie einen JS-Objekteigenschaftsnamen aus einer Variablen fest

177

Ich muss einen JS-Objekteigenschaftsnamen dynamisch festlegen.

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

    data = {
        key : 'name1',
    }
}

Ergebnis sollte sein:

data = {
    1name: 'name1'
    2name: 'name1'
}
Vinoth Babu
quelle
Wenn sie sequentiell sind, warum verwenden Sie kein Array?
Epascarello
Ich möchte wissen, welche drei von Ihnen den falschen Pfeil getroffen haben. Komm schon, mach schon.
Charles

Antworten:

193
var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}
Schließung
quelle
4
Musas Antwort unten artikuliert auch richtig, dass die Verwendung der [] Notation tatsächlich der einzige Weg ist, dies zu tun.
Dennis Plucinik
1
Beachten Sie auch, dass @ ChilNuts Antwort unten jetzt den einfachsten Weg beschreibt, dies mit ES6 zu tun
Rambossa
1
Tatsächlich wird mit der neuen Syntax das, was OP erreichen will, nur möglich sein, wenn das Schleifenlimit fest codiert und klein ist.
Musa
166

Sie müssen die []Notation verwenden, um Schlüssel dynamisch festzulegen.

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

}

In ES6 können Sie jetzt die Objektliteral-Syntax verwenden, um Objektschlüssel dynamisch zu erstellen. Fügen Sie einfach die Variable ein []

var key  = i + 'name';
data = {
    [key] : 'name1',
}
Musa
quelle
3
jsonVariable = {}; sollte nicht innerhalb der for-Schleife initialisiert werden.
Schließung
Auch Sie machen jsonVariable hier global
Dennis Plucinik
129

Mit ECMAScript 6 können Sie variable Eigenschaftsnamen mit der Objektliteral-Syntax wie folgt verwenden:

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

Diese Syntax ist in den folgenden neueren Browsern verfügbar:

Edge 12+ (keine IE-Unterstützung), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

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

Sie können älteren Browsern Unterstützung hinzufügen, indem Sie einen Transpiler wie babel verwenden . Es ist einfach, ein gesamtes Projekt zu transpilieren, wenn Sie einen Modulbündler wie Rollup oder Webpack verwenden .

chiliNUT
quelle
2
Vielen Dank für das Hinzufügen der fantastischen ES6-Syntax
Rambossa
Ohne ES6 kann ich var payload = {dynamicKey: val} nicht definieren. Ich muss var payload = {} und payload [variableName] = val ausführen.
Sainath SR
23

Auf diese Weise können Sie den Wert dynamisch einstellen

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

Verwenden Sie eine Variable als Objektschlüssel

let key = 'myKey';

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

Hier erfahren Sie, wie Sie Ihr Objekt iterieren

Boris Detry
quelle
Können Sie bitte etwas näher darauf eingehen, um anderen mitzuteilen, warum dies eine Lösung sein könnte?
Phaberest
Die Informationen, die Sie hinzugefügt haben, sind in Ordnung, geben Sie nur niemals eine Antwort mit nur Code;)
Phaberest
7

Es spielt keine Rolle, woher die Variable kommt. Hauptsache wir haben eins ... Setzen Sie den Variablennamen in eckige Klammern "[..]".

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}
Knut Hering
quelle
Das funktioniert gut, ich frage mich, ob es in allen Browsern / Versionen funktioniert
Mercury
1
jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

Dies wird ähnlich sein wie

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}
Suman
quelle
0

In Anlehnung an den obigen Kommentar von Sainath SR konnte ich einen js-Objekteigenschaftsnamen aus einer Variablen in Google Apps Script (die ES6 noch nicht unterstützt) festlegen, indem ich das Objekt definierte und dann einen anderen Schlüssel / Wert außerhalb des Objekts definierte:

var salesperson = ...

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

mailchimpInterests[salesperson] = true;
Mark Corrigan
quelle