web-dev-qa-db-fra.com

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

Je retire des éléments du DOM avec jQuery et je veux définir une propriété sur un objet à l'aide de la variable 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 inclut un élément avec id de "myId", je veux que obj ait une propriété nommée "myId". Ce qui précède me donne name.

Comment nommer une propriété d'un objet en utilisant une variable en utilisant JavaScript?

javascriptjqueryobjectsyntax
235
Todd R

Vous pouvez utiliser cette syntaxe équivalente:

obj[name] = value
429
CMS

Avec ECMAScript 2015 vous pouvez le faire directement dans la déclaration d'objet en utilisant la notation entre crochets:

var obj = {
  [key]: value
}

Où key peut être n’importe quel type d’expression (par exemple une variable) renvoyant une valeur:

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

Vous pouvez même faire une liste d'objets comme celui-ci 

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

Nous devons d’abord définir la clé en tant que variable, puis affecter la clé en tant qu’objet. Par exemple 

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

3
KARTHIKEYAN.A

Il existe deux notations différentes pour accéder aux propriétés de l'objet

  • Point notation: myObj.prop1
  • Bracket notation: myObj ["prop1"]

La notation par points est rapide et facile, mais vous devez utiliser explicitement le nom de la propriété. Aucune substitution, variables, etc. 

La notation entre crochets est ouverte. Il utilise une chaîne mais vous pouvez produire la chaîne en utilisant n’importe quel code Js légal. Vous pouvez spécifier la chaîne littérale (bien que, dans ce cas, la notation par points serait plus facile à lire), utiliser une variable ou calculer d’une manière ou d’une autre.

Ainsi, ils affectent tous la propriété myObj nommée prop1 à la valeur 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";

Pièges:

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

tl; dnr : Si vous voulez calculer ou référencer la clé, vous devez utiliser la notation bracketing. Si vous utilisez explicitement la clé, utilisez la notation dot pour un code simple et clair.

Remarque: il existe quelques autres réponses bonnes et correctes, mais je les ai personnellement trouvées un peu brèves, car elles ne connaissaient pas très bien le côté bizarre de JS. Cela pourrait être utile à certaines personnes. 

2
jim birch

Avec lodash, vous pouvez créer un nouvel objet comme ceci _.set :

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

Ou vous pouvez définir un objet existant comme ceci:

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

Soyez prudent si vous souhaitez utiliser point (".") Dans votre chemin, car lodash peut définir une hiérarchie, par exemple:

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

Avec l'avènement de ES2015 Object.assign et noms de propriété calculés le code de l'OP se résume à:

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

objectname.newProperty = value;

1
ARNAB

Si vous souhaitez ajouter des champs à un objet de manière dynamique, procédez comme suit: 

 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
}

Cela créera un objet de données contenant les champs suivants:

{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

Si vous avez un objet, vous pouvez créer un tableau de clés, puis mapper et créer un nouvel objet à partir de clés d'objet et de valeurs précédentes.

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

Basé sur wOxxOm answer, voici un exemple d'utilisation:

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