it-swarm.com.de

Hinzufügen einer Eigenschaft zu einem JavaScript-Objekt unter Verwendung einer Variablen als Namen?

Ich ziehe mit jQuery Elemente aus dem DOM heraus und möchte mit Hilfe der id des DOM-Elements eine Eigenschaft für ein Objekt festlegen. 

Beispiel

const obj = {}

jQuery(itemsFromDom).each(function() {
  const element = jQuery(this)
  const name = element.attr('id')
  const value = element.attr('value')

  // Here is the problem
  obj.name = value
})

Wenn itemsFromDom ein Element mit einer id von "myId" enthält, möchte ich, dass obj eine Eigenschaft mit dem Namen "myId" hat. Das oben genannte gibt mir name.

Wie benenne ich eine Eigenschaft eines Objekts mithilfe einer Variablen mithilfe von JavaScript?

235
Todd R

Sie können diese gleichwertige Syntax verwenden:

obj[name] = value
429
CMS

Mit ECMAScript 2015 können Sie dies direkt in der Objektdeklaration mittels Klammernotation tun:

var obj = {
  [key]: value
}

Dabei kann key eine beliebige Art von Ausdruck sein (z. B. eine Variable), die einen Wert zurückgibt:

var obj = {
  ['hello']: 'World',
  [x + 2]: 42,
  [someObject.getId()]: someVar
}
87
kube

Sie können sogar eine Liste mit Objekten erstellen 

var feeTypeList = [];
$('#feeTypeTable > tbody > tr').each(function (i, el) {
    var feeType = {};

    var $ID = $(this).find("input[id^=txtFeeType]").attr('id');

    feeType["feeTypeID"] = $('#ddlTerm').val();
    feeType["feeTypeName"] = $('#ddlProgram').val();
    feeType["feeTypeDescription"] = $('#ddlBatch').val();

    feeTypeList.Push(feeType);
});
11
dnxit

Für den Zugriff auf Objekteigenschaften gibt es zwei verschiedene Notationen

  • Punkt Notation: myObj.prop1
  • Klammer Notation: myObj ["prop1"]

Punktnotation ist schnell und einfach, aber Sie müssen den tatsächlichen Eigenschaftsnamen explizit verwenden. Keine Substitution, Variablen usw.

Die Klammernotation ist offen. Es wird eine Zeichenfolge verwendet, aber Sie können die Zeichenfolge mit jedem zulässigen JS-Code erstellen. Sie können die Zeichenfolge als Literal angeben (obwohl in diesem Fall die Punktnotation leichter lesbar ist) oder eine Variable verwenden oder auf irgendeine Weise berechnen.

Also setzen diese alle die myObj Eigenschaft mit dem Namen prop1 auf den Wert Hallo :

// quick easy-on-the-eye dot notation
myObj.prop1 = "Hello";

// brackets+literal
myObj["prop1"] = "Hello";

// using a variable
var x = "prop1"; 
myObj[x] = "Hello";                     

// calculate the accessor string in some weird way
var numList = [0,1,2];
myObj[ "prop" + numList[1] ] = "Hello";     

Fallstricke:

myObj.[xxxx] = "Hello";      // wrong: mixed notations, syntax fail
myObj[prop1] = "Hello";      // wrong: this expects a variable called prop1

tl; dnr: Wenn Sie den Schlüssel berechnen oder referenzieren möchten, müssen Sie verwenden Klammer Notation . Wenn Sie den Schlüssel explizit verwenden, verwenden Sie Punktnotation für einfachen Code.

Hinweis: Es gibt noch einige andere gute und richtige Antworten, die ich persönlich aufgrund der geringen Vertrautheit mit JS-Eigenheiten ein wenig kurz fand. Dies könnte für einige Leute nützlich sein.

3
jim birch

Zuerst müssen wir den Schlüssel als Variable definieren und dann als Schlüssel als Objekt zuweisen, zum Beispiel

var data = {key:'dynamic_key',value:'dynamic_value'}
var key = data.key;
var obj = { [key]: data.value}
console.log(obj)

3
KARTHIKEYAN.A

Mit lodash können Sie ein neues Objekt wie folgt erstellen: _.set :

obj = _.set({}, key, val);

Oder Sie können das vorhandene Objekt wie folgt festlegen:

var existingObj = { a: 1 };
_.set(existingObj, 'a', 5); // existingObj will be: { a: 5 }

Sie sollten vorsichtig sein, wenn Sie den Punkt (".") In Ihrem Pfad verwenden möchten, da lodash Hierarchien festlegen kann, zum Beispiel:

_.set({}, "a.b.c", "d"); // { "a": { "b": { "c": "d" } } }
2
Momos Morbias

Mit dem Aufkommen von ES2015 Object.assign und berechneten Eigenschaftsnamen läuft der Code des OP auf:

var obj = Object.assign.apply({}, $(itemsFromDom).map((i, el) => ({[el.id]: el.value})));
1
wOxxOm

objectname.newProperty = value;

1
ARNAB

Wenn Sie einem Objekt dynamisch Felder hinzufügen möchten, gehen Sie am einfachsten folgendermaßen vor: 

 var params= [
{key: "k1", value=1},
{key: "k2", value=2},
{key: "k3", value=3}];

for(i=0; i< params.len; i++) {
  data[params[i].key] = params[i].value
}

Dadurch wird ein Datenobjekt erstellt, das folgende Felder enthält:

{k1:1, k2:2, k3:3}
0
Sruthi Poddutur
const data = [{
    name: 'BMW',
    value: '25641'
  }, {
    name: 'Apple',
    value: '45876'
  },
  {
    name: 'Benz',
    value: '65784'
  },
  {
    name: 'Toyota',
    value: '254'
  }
]

const obj = {
  carsList: [{
    name: 'Ford',
    value: '47563'
  }, {
    name: 'Toyota',
    value: '254'
  }],
  pastriesList: [],
  fruitsList: [{
    name: 'Apple',
    value: '45876'
  }, {
    name: 'Pineapple',
    value: '84523'
  }]
}

let keys = Object.keys(obj);

result = {};

for(key of keys){
    let a =  [...data,...obj[key]];
    result[key] = a;

}
0
Shubham Asolkar

Wenn Sie über ein Objekt verfügen, können Sie ein Array von Schlüsseln erstellen, um diese zuzuordnen, und aus den vorherigen Objektschlüsseln und Werten ein neues Objekt erstellen.

Object.keys(myObject)
.map(el =>{
 const obj = {};
 obj[el]=myObject[el].code;
 console.log(obj);
});
0
Davo Mkrtchyan

Basierend auf der Antwort von wOxxOm ist dies ein Beispiel für die Verwendung:

const data = [
    {"id": "z1", "val":10},
    {"id": "z2", "val":20},
    {"id": "z3", "val":30}
];
    
const obj = Object.assign.apply({}, data.map((el, i) => ({[el.id]: el.val})));

console.log(obj);

0
robe007