変数からJSオブジェクトのプロパティ名を設定する方法


178

JSオブジェクトのプロパティ名を動的に設定する必要があります。

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

    data = {
        key : 'name1',
    }
}

結果は次のようになります。

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

連続している場合、なぜ配列を使用しないのですか?
epascarello

あなたの3人が間違った矢をたてたのか知りたい。さあ、フェス。
Charles

回答:


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

4
以下のMusaの応答も、[]表記を使用することが実際にそれを行う唯一の方法であることを正しく説明しています。
Dennis Plucinik

1
また、以下の@ChilNutの応答は、ES6を使用してこれを行う最も簡単な方法を説明していることに注意してください
rambossa

1
実際、新しい構文では、OPが達成しようとしていることは、ループ制限がハードコーディングされ、小さい場合にのみ可能です。
Musa

168

[]キーを動的に設定するには、表記法を使用する必要があります。

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

}

ES6では、オブジェクトリテラル構文を使用して動的にオブジェクトキーを作成し、変数を []

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

3
jsonVariable = {}; forループ内で初期化しないでください。
閉鎖

また、jsonVariableをここでグローバルにします
Dennis Plucinik

130

ECMAScript 6では、次のように、オブジェクトリテラル構文で変数プロパティ名を使用できます。

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

この構文は、次の新しいブラウザーで使用できます。

Edge 12以降(IEサポートなし)、FF34以降、Chrome 44以降、Opera 31以降、Safari 7.1以降

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

babelなどのトランスパイラーを使用して、古いブラウザーにサポートを追加できます。あなたがバンドラのようなモジュールを使用している場合は、プロジェクト全体をtranspileすることは容易であるロールアップまたはWebPACKの


2
素晴らしいES6構文を追加していただきありがとうございます
rambossa

ES6がないと、var payload = {dynamicKey:val}を定義できないため、var payload = {}およびpayload [variableName] = valを実行する必要があります。
Sainath SR 2018

23

これは動的に値を設定する方法です

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


7

変数の出所は関係ありません。主なものは...変数名を角括弧 "[..]"の間に設定します。

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

これはうまく機能します。すべてのブラウザー/バージョン
Mercury

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

これは次のようになります

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

0

上記のSainath SRのコメントに沿って、オブジェクトを定義してから、オブジェクトの外部に別のキー/値を定義することで、Google Appsスクリプトの変数(まだES6をサポートしていません)からjsオブジェクトのプロパティ名を設定できました。

var salesperson = ...

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

mailchimpInterests[salesperson] = true;
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.