Cara mengatur nama properti objek JS dari variabel

178

Saya perlu menetapkan nama properti objek JS secara dinamis.

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

    data = {
        key : 'name1',
    }
}

Hasilnya harus:

data = {
    1name: 'name1'
    2name: 'name1'
}
Vinoth Babu
sumber
Jika mereka berurutan, mengapa Anda tidak menggunakan Array?
epascarello
Saya ingin tahu kalian bertiga yang memukul panah yang salah. Ayo, cepat.
Charles

Jawaban:

194
var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}
penutupan
sumber
4
Respons Musa di bawah ini juga dengan benar menyatakan bahwa menggunakan notasi [] sebenarnya satu-satunya cara untuk melakukannya.
Dennis Plucinik
1
Perhatikan juga bahwa respons @ ChilNut di bawah sekarang menjelaskan cara termudah untuk melakukan ini menggunakan ES6
rambossa
1
Sebenarnya, dengan sintaks baru yang ingin dicapai oleh OP hanya akan mungkin jika batas loop hardcoded dan kecil.
Musa
168

Anda harus menggunakan []notasi untuk mengatur kunci secara dinamis.

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

}

Sekarang di ES6 Anda dapat menggunakan sintaks literal objek untuk membuat kunci objek secara dinamis, cukup bungkus variabelnya []

var key  = i + 'name';
data = {
    [key] : 'name1',
}
Musa
sumber
3
jsonVariable = {}; seharusnya tidak diinisialisasi di dalam for loop.
penutupan
Anda juga membuat jsonVariable global di sini
Dennis Plucinik
130

Dengan ECMAScript 6, Anda bisa menggunakan nama properti variabel dengan sintaks literal objek, seperti ini:

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

Sintaks ini tersedia di browser yang lebih baru berikut:

Edge 12+ (Tanpa dukungan IE), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

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

Anda dapat menambahkan dukungan ke browser lama dengan menggunakan transpiler seperti babel . Sangat mudah untuk mengubah seluruh proyek jika Anda menggunakan bundler modul seperti rollup atau webpack .

cabeNUT
sumber
2
Terima kasih telah menambahkan sintaks ES6 yang mengagumkan
rambossa
Tanpa ES6 saya tidak dapat mendefinisikan var payload = {dynamicKey: val}, saya perlu melakukan var payload = {} dan payload [variableName] = val.
Sainath SR
23

Ini adalah cara untuk menetapkan nilai secara dinamis

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

Gunakan variabel sebagai kunci objek

let key = 'myKey';

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

Lihat Bagaimana cara mengembalikan objek Anda di sini

Boris Detry
sumber
Bisakah Anda menjelaskan sedikit lebih banyak agar orang lain tahu mengapa ini bisa menjadi solusi?
phaberest
Info yang Anda tambahkan baik-baik saja, tidak pernah memberikan jawaban hanya dengan kode;)
phaberest
7

Tidak masalah dari mana variabel tersebut berasal. Hal utama yang kita miliki satu ... Tetapkan nama variabel antara tanda kurung "[..]".

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}
Knut Hering
sumber
Ini berfungsi dengan baik, saya bertanya-tanya apakah itu bekerja di semua browser / versi
Merkurius
1
jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

ini akan mirip dengan

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}
suman
sumber
0

Sejalan dengan komentar Sainath SR di atas, saya dapat menetapkan nama properti objek js dari variabel di Google Apps Script (yang belum mendukung ES6) dengan mendefinisikan objek lalu menentukan kunci / nilai lain di luar objek:

var salesperson = ...

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

mailchimpInterests[salesperson] = true;
Mark Corrigan
sumber