¿Agregar una propiedad a un objeto JavaScript usando una variable como nombre?


277

Estoy sacando elementos del DOM con jQuery y quiero establecer una propiedad en un objeto usando el idelemento DOM.

Ejemplo

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 itemsFromDomincluye un elemento con un id"myId", quiero objtener una propiedad llamada "myId". Lo anterior me da name.

¿Cómo nombro una propiedad de un objeto usando una variable usando JavaScript?



Respuestas:


469

Puede usar esta sintaxis equivalente:

obj[name] = value

122

Con ECMAScript 2015 puede hacerlo directamente en la declaración de objeto utilizando la notación de corchetes:

var obj = {
  [key]: value
}

Donde keypuede haber cualquier tipo de expresión (por ejemplo, una variable) que devuelva un valor:

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

13
Esta pregunta se trata de modificar el objeto existente, no crear uno nuevo.
Michał Perłakowski

28
Esta pregunta en particular podría tratarse sobre la modificación, pero está referenciada por otras preguntas que tratan sobre la creación dinámica de objetos, por lo que terminé aquí y felizmente me beneficié de esta respuesta.
Oliver Lloyd

2
@wOxxOm jajaja, sí, ¿por qué pasaría por la molestia de obj[name]=valuecuándo podría usar su sugerencia
chiliNUT

2
No estoy seguro de qué es ECMAScript 6, pero lo aprecio mucho
Arthur Tarasov

2
@ArthurTarasov: ECMAScript 6 se llama más formalmente ECMAScript 2015 ("ES2015"), también conocido como ECMAScript 6ta edición ("ES6"). Es la especificación para JavaScript lanzada en junio de 2015. Desde entonces hemos tenido ES2016 y pronto tendremos ES2017, ahora están en un ciclo anual.
TJ Crowder

12

Incluso puedes hacer una lista de objetos como este

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

6

Hay dos anotaciones diferentes para acceder a las propiedades de los objetos.

  • Dot notación: myObj.prop1
  • Notación de soporte : myObj ["prop1"]

La notación de puntos es rápida y fácil, pero debe usar el nombre de propiedad real explícitamente. Sin sustitución, variables, etc.

La notación de corchetes es abierta. Utiliza una cadena pero puede producir la cadena usando cualquier código js legal. Puede especificar la cadena como literal (aunque en este caso la notación de punto se leería más fácilmente) o usar una variable o calcular de alguna manera.

Por lo tanto, todos éstos establecen el myObj propiedad denominada prop1 al valor Hola :

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

Trampas:

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

tl; dnr : si desea calcular o hacer referencia a la clave, debe usar la notación de corchetes . Si está utilizando la clave explícitamente, utilice la notación de puntos para un código claro simple.

Nota: hay algunas otras respuestas buenas y correctas, pero personalmente las encontré un poco breves debido a una baja familiaridad con la peculiaridad de JS sobre la marcha. Esto puede ser útil para algunas personas.


3

Con lodash, puede crear un nuevo objeto como este _.set :

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

O puede establecer un objeto existente como este:

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

Debe tener cuidado si desea utilizar el punto (".") En su ruta, porque lodash puede establecer la jerarquía, por ejemplo:

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

2

Primero necesitamos definir la clave como variable y luego debemos asignar como clave como objeto., Por ejemplo

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



0

Si desea agregar campos a un objeto dinámicamente, la forma más sencilla de hacerlo es la siguiente:

 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
}

Esto creará un objeto de datos que tiene los siguientes campos:

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

0

Si tiene un objeto, puede hacer una matriz de claves, que asignarlas, y crear un nuevo objeto a partir de claves y valores de objetos anteriores.

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

0

ajavascript tiene dos tipos de anotación para obtener propiedades de objeto javascript:

Obj = {};

1) (.) Anotación ej. Obj.id esto solo funcionará si el objeto ya tiene una propiedad con el nombre 'id'

2) ([]) anotación ej. Obj [id] aquí si el objeto no tiene ninguna propiedad con el nombre 'id', creará una nueva propiedad con el nombre 'id'.

así que para el siguiente ejemplo:

Siempre se creará una nueva propiedad cuando escriba Obj [nombre]. Y si la propiedad ya existe con el mismo nombre, la anulará.

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

0

Sin embargo, relacionado con el tema, no específicamente para jquery. Usé esto en proyectos de reacción ec6, tal vez ayude a alguien:

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

PD: Tenga en cuenta el carácter de la cita.



-2
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;

}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.