Jak ustawić nazwę właściwości obiektu JS na podstawie zmiennej

178

Muszę dynamicznie ustawić nazwę właściwości obiektu JS.

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

    data = {
        key : 'name1',
    }
}

Wynik powinien być:

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

javascript

— Vinoth Babu
źródło

Jeśli są sekwencyjne, dlaczego nie używasz tablicy?

— epascarello

Chcę wiedzieć, która z was trójka trafiła w złą strzałę. No dalej, przyznaj się.

— Charles

1

możliwy duplikat użycia zmiennej dla klucza w

— literale

194

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

— zamknięcie
źródło

4

Poniższa odpowiedź Musy również poprawnie stwierdza, że użycie notacji [] jest właściwie jedynym sposobem na zrobienie tego.

— Dennis Plucinik

1

Zwróć również uwagę, że poniższa odpowiedź @ ChilNut opisuje teraz najłatwiejszy sposób zrobienia tego za pomocą ES6

— rambossa Stycznia

1

W rzeczywistości dzięki nowej składni to, co próbuje osiągnąć OP, będzie możliwe tylko wtedy, gdy limit pętli jest zakodowany na stałe i mały.

— Musa

168

Będziesz musiał używać []notacji, aby dynamicznie ustawiać klucze.

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

}

Teraz w ES6 możesz używać składni literału obiektowego do dynamicznego tworzenia kluczy obiektów, po prostu zawiń zmienną []

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

— Musa
źródło

3

jsonVariable = {}; nie powinny być inicjowane wewnątrz pętli for.

— zamknięcie

Również tutaj robisz globalną zmienną jsonVariable

— Dennis Plucinik,

130

Dzięki ECMAScript 6 możesz używać nazw właściwości zmiennych ze składnią literału obiektu, na przykład:

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

Ta składnia jest dostępna w następujących nowszych przeglądarkach:

Edge 12+ (brak obsługi IE), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

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

Możesz dodać obsługę starszych przeglądarek za pomocą transpilera, takiego jak babel . Transpile całego projektu jest łatwe, jeśli używasz pakietu modułów, takiego jak rollup lub webpack .

— chiliNUT
źródło

2

Dzięki za dodanie niesamowitej składni ES6

— rambossa

Bez ES6 nie mogę zdefiniować var payload = {dynamicKey: val}, muszę zrobić var payload = {} i payload [nazwa_zmiennej] = val.

— Sainath SR

23

Jest to sposób na dynamiczne ustawianie wartości

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

— timc
źródło

20

Użyj zmiennej jako klucza obiektu

let key = 'myKey';

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

Zobacz, jak iteretować swój obiekt tutaj

— Boris Detry
źródło

Czy możesz wyjaśnić trochę więcej, aby inni wiedzieli, dlaczego może to być rozwiązanie?

— phaberest

Dodane informacje są w porządku, po prostu nigdy nie udzielaj odpowiedzi tylko kodem;)

— phaberest

7

Nie ma znaczenia, skąd pochodzi zmienna. Najważniejsze, że mamy jedno ... Ustaw nazwę zmiennej w nawiasach kwadratowych "[..]".

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

— Knut Hering
źródło

To działa dobrze, zastanawiam się, czy działa we wszystkich przeglądarkach / wersjach

— Mercury

1

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

będzie to podobne do

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

— suman
źródło

0

Zgodnie z powyższym komentarzem Sainath SR, mogłem ustawić nazwę właściwości obiektu js na podstawie zmiennej w Google Apps Script (która jeszcze nie obsługuje ES6), definiując obiekt, a następnie definiując inny klucz / wartość poza obiektem:

var salesperson = ...

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

mailchimpInterests[salesperson] = true;

— Mark Corrigan
źródło