Ajouter une propriété à un objet JavaScript en utilisant une variable comme nom ?

Question

J'extrais des éléments du DOM avec jQuery et je veux définir une propriété sur un objet en utilisant la fonction id de l'élément DOM.

Exemple

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

Si itemsFromDom comprend un élément avec un id de "monId", je veux obj pour avoir une propriété nommée "myId". Ce qui précède me donne name .

Comment nommer une propriété d'un objet à l'aide d'une variable en JavaScript ?

Answer 1

Tout d'abord, nous devons définir la clé comme une variable et ensuite nous devons assigner la clé comme un objet. par exemple

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

Answer 2

En rapport avec le sujet, mais pas spécifiquement pour jquery. J'ai utilisé ceci dans des projets react ec6, peut-être que cela aidera quelqu'un :

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

PS : Veuillez faire attention aux guillemets.

Answer 3

Avec l'arrivée de l'ES2015 Objet.assign y noms des propriétés calculées le code de l'OP se résume à :

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

Answer 4

Si vous voulez ajouter des champs à un objet de façon dynamique, la façon la plus simple de le faire est la suivante :

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

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

console.log(data); // -> { k1: 1, k2: 2, k3: 3 }

Answer 5

Ajavascript a deux types d'annotation pour récupérer les propriétés d'un objet javascript :

Obj = {} ;

1) Annotation (.) ex. Obj.id ceci ne fonctionnera que si l'objet a déjà une propriété avec le nom 'id'.

2) ([]) annotation eg . Obj[id] ici si l'objet n'a pas de propriété avec le nom 'id', il créera une nouvelle propriété avec le nom 'id'.

donc pour l'exemple ci-dessous :

Une nouvelle propriété sera toujours créée lorsque vous écrirez Obj[nom]. Et si la propriété existe déjà avec le même nom, elle sera remplacée.

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