Aggiungere una proprietà a un oggetto JavaScript utilizzando una variabile come nome?

Sto estraendo gli elementi dal DOM con jQuery e voglio impostare una proprietà su un oggetto usando l' idelemento DOM.

Esempio

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
})

Se itemsFromDominclude un elemento con un id"myId", voglio objavere una proprietà denominata "myId". Quanto sopra mi dà name.

Come posso nominare una proprietà di un oggetto usando una variabile usando JavaScript?

È possibile utilizzare questa sintassi equivalente:

obj[name] = value

Con ECMAScript 2015 puoi farlo direttamente nella dichiarazione dell'oggetto usando la notazione parentesi:

var obj = {
  [key]: value
}

Dove keypuò essere qualsiasi tipo di espressione (ad esempio una variabile) che restituisce un valore:

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

Puoi persino creare un Elenco di oggetti come questo

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);
});

Esistono due diverse notazioni per accedere alle proprietà dell'oggetto

• Notazione dot : myObj.prop1
• Staffa notazione: myObj [ "prop1"]

La notazione dei punti è semplice e veloce ma è necessario utilizzare esplicitamente il nome della proprietà attuale. Nessuna sostituzione, variabili, ecc.

La notazione di parentesi è aperta. Usa una stringa ma puoi produrre la stringa usando qualsiasi codice js legale. È possibile specificare la stringa come letterale (anche se in questo caso la notazione con punti sarebbe più semplice) o utilizzare una variabile o calcolare in qualche modo.

Quindi, tutti questi impostano la proprietà myObj denominata prop1 sul valore Hello :

// 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";     

insidie:

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

tl; dnr : se si desidera calcolare o fare riferimento alla chiave, è necessario utilizzare la notazione tra parentesi . Se si utilizza la chiave in modo esplicito, utilizzare la notazione punto per un semplice codice chiaro.

Nota: ci sono altre risposte valide e corrette, ma personalmente le ho trovate un po 'brevi, provenienti da una scarsa familiarità con la stranezza al volo di JS. Questo potrebbe essere utile per alcune persone.

Con lodash, puoi creare un nuovo oggetto come questo _.set :

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

Oppure puoi impostare l'oggetto esistente in questo modo:

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

Dovresti fare attenzione se vuoi usare il punto (".") Nel tuo percorso, perché lodash può impostare la gerarchia, ad esempio:

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

Per prima cosa dobbiamo definire la chiave come variabile e quindi dobbiamo assegnare come chiave come oggetto., Ad esempio

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

Con l'avvento di ES2015 Object.assign e nomi di proprietà calcolati il codice dell'OP si riduce a:

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

Se si desidera aggiungere campi a un oggetto in modo dinamico, il modo più semplice per farlo è il seguente:

 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
}

Questo creerà un oggetto dati che ha i seguenti campi:

{k1:1, k2:2, k3:3}

Se si dispone di un oggetto, è possibile creare una matrice di chiavi, quindi mappare e creare un nuovo oggetto da chiavi e valori oggetto precedenti.

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

ajavascript ha due tipi di annotazioni per il recupero delle proprietà dell'oggetto javascript:

Obj = {};

1) (.) Annotazione ad es. Obj.id funzionerà solo se l'oggetto ha già una proprietà con nome 'id'

2) ([]) annotazione ad es. Obj [id] qui se l'oggetto non ha alcuna proprietà con nome 'id', creerà una nuova proprietà con nome 'id'.

quindi per l'esempio seguente:

Una nuova proprietà verrà creata sempre quando scrivi Obj [nome]. E se la proprietà esiste già con lo stesso nome, la sovrascriverà.

const obj = {}
    jQuery(itemsFromDom).each(function() {
      const element = jQuery(this)
      const name = element.attr('id')
      const value = element.attr('value')
      // This will work
      obj[name]= value;
    })

Relativo all'argomento, non specifico per jquery però. L'ho usato nei progetti di reazione ec6, forse aiuta qualcuno:

this.setState({ [`${name}`]: value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[name]));
    });

PS: per favore, ricorda il carattere di citazione.

objectname.newProperty = value;

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;

}