Estoy intentando acceder a una propiedad de un objeto usando un nombre dinámico. ¿Es posible?

const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"
780
RichW 22 nov. 2010 a las 14:23

13 respuestas

Solución ES5 para navegadores antiguos (solo cliente)

Eval (en el lado del cliente) no es mala!

Por ejemplo:

a = [ {b:[{a:1,b:[{c:1,d:2}]}]} ]

En lugar de :

if(a && a[0] && a[0].b && a[0].b[0] && a[0].b[0].b && a[0].b[0].b[0] && a[0].b[0].b[0].d && a[0].b[0].b[0].d == 2 )  // true

Nosotras podemos ahora:

if( getValue('a[0].b[0].b[0].d') == 2 ) // true

Aquí está el código

/**
 * @method getValue
 * @description simplifies checking for existance and getting a deeply nested value within a ceratin context
 * @argument {string} s       string representation of the full path to the requested property 
 * @argument {object} context optional - the context to check defaults to window
 * @returns the value if valid and set, returns undefined if invalid / not available etc.
 */
var getValue = function( s, context ){
    var fn = function(){
        try{
            return eval(s);
        }catch(e){
            return undefined;
        }
    }
    return fn.call(context||window,s);
}
-2
levi 9 dic. 2019 a las 14:22
const something = { bar: "Foobar!" };
const foo = 'bar';

something[\`${foo}\`];
-3
Cody Gray 19 sep. 2017 a las 17:12

Puede lograr esto de muchas maneras diferentes.

let foo = {
    bar: 'Hello World'
};

foo.bar;
foo['bar'];

La notación de corchetes es especialmente poderosa ya que le permite acceder a una propiedad basada en una variable:

let foo = {
    bar: 'Hello World'
};

let prop = 'bar';

foo[prop];

Esto se puede extender al bucle sobre cada propiedad de un objeto. Esto puede parecer redundante debido a las nuevas construcciones de JavaScript, como para ... de ..., pero ayuda a ilustrar un caso de uso:

let foo = {
    bar: 'Hello World',
    baz: 'How are you doing?',
    last: 'Quite alright'
};

for (let prop in foo.getOwnPropertyNames()) {
    console.log(foo[prop]);
}

La notación de punto y paréntesis también funciona como se espera para los objetos anidados:

let foo = {
    bar: {
        baz: 'Hello World'
    }
};

foo.bar.baz;
foo['bar']['baz'];
foo.bar['baz'];
foo['bar'].baz;

Desestructuración de objetos

También podríamos considerar la desestructuración de objetos como un medio para acceder a una propiedad en un objeto, pero de la siguiente manera:

let foo = {
    bar: 'Hello World',
    baz: 'How are you doing?',
    last: 'Quite alright'
};

let prop = 'last';
let { bar, baz, [prop]: customName } = foo;

// bar = 'Hello World'
// baz = 'How are you doing?'
// customName = 'Quite alright'
15
Gorka Hernandez 13 dic. 2017 a las 08:06

Debe usar JSON.parse, eche un vistazo a https://www.w3schools.com /js/js_json_parse.asp

const obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}')
console.log(obj.name)
console.log(obj.age)
-2
onmyway133 14 jun. 2017 a las 21:42

Hay dos formas de acceder a las propiedades de un objeto:

  • Notación de puntos: something.bar
  • Notación de paréntesis: something['bar']

El valor entre paréntesis puede ser cualquier expresión. Por lo tanto, si el nombre de la propiedad se almacena en una variable, debe usar la notación de paréntesis:

var foo = 'bar';
something[foo];
// both x = something[foo] and something[foo] = x work as expected
871
Salman A 2 ene. 2018 a las 18:05

Actualizado

He tenido en cuenta los comentarios a continuación y acepto. Eval debe ser evitado.

Acceder a las propiedades raíz en el objeto se logra fácilmente con obj[variable], pero anidarse complica las cosas. Para no escribir código ya escrito, sugiero usar lodash.get.

Ejemplo

// Accessing root property
var rootProp = 'rootPropert';
_.get(object, rootProp, defaultValue);

// Accessing nested property
var listOfNestedProperties = [var1, var2];
_.get(object, listOfNestedProperties);

Lodash get se puede usar de diferentes maneras, aquí hay un enlace a la documentación lodash.get

8
Mr Br 19 jun. 2018 a las 09:29

Siempre que necesite acceder a la propiedad dinámicamente, debe usar un corchete para acceder a la propiedad no "." operador
Sintaxis: objeto [propiedad}

const something = { bar: "Foobar!" };
const foo = 'bar';
// something.foo; -- not correct way at it is expecting foo as proprty in  something={ foo: "value"};
// correct way is  something[foo]
alert( something[foo])
5
Manasi 31 jul. 2018 a las 08:25

Puedes hacerlo así usando Lodash get

_.get(object, 'a[0].b.c');
8
JJJ 6 sep. 2018 a las 15:57

En javascript podemos acceder con:

  • notación de punto - foo.bar
  • corchetes: foo[someVar] o foo["string"]

Pero solo el segundo caso permite acceder a las propiedades dinámicamente:

var foo = { pName1 : 1, pName2 : [1, {foo : bar }, 3] , ...}

var name = "pName"
var num  = 1;

foo[name + num]; // 1

// -- 

var a = 2;
var b = 1;
var c = "foo";

foo[name + a][b][c]; // bar
33
Sonique 1 jul. 2014 a las 15:40

Esta es mi solución:

function resolve(path, obj) {
    return path.split('.').reduce(function(prev, curr) {
        return prev ? prev[curr] : null
    }, obj || self)
}

Ejemplos de uso:

resolve("document.body.style.width")
// or
resolve("style.width", document.body)
// or even use array indexes
// (someObject has been defined in the question)
resolve("part.0.size", someObject) 
// returns null when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})
78
GeekyDeaks 23 sep. 2017 a las 14:45

Hay algunas posibilidades:

const test = {
    prop1: {
      prop2: {
        prop3: "I'm very nested"
      }
    }

const test1 = test.prop1.prop2.prop3
const test2 = test['prop1']['prop2']['prop3']
const test3 = test['prop1.prop2.prop3'] //will return undefined
const test4 = _.get(test, 'prop1.prop2.prop3') //use lodash

Si desea obtener un valor anidado dinámicamente (por ejemplo, por variable), su mejor opción será usar lodash.

-1
BartusZak 4 oct. 2019 a las 14:49

Se pone interesante cuando tienes que pasar parámetros a esta función también.

Código jsfiddle

var obj = {method:function(p1,p2,p3){console.log("method:",arguments)}}

var str = "method('p1', 'p2', 'p3');"

var match = str.match(/^\s*(\S+)\((.*)\);\s*$/);

var func = match[1]
var parameters = match[2].split(',');
for(var i = 0; i < parameters.length; ++i) {
  // clean up param begninning
    parameters[i] = parameters[i].replace(/^\s*['"]?/,'');
  // clean up param end
  parameters[i] = parameters[i].replace(/['"]?\s*$/,'');
}

obj[func](parameters); // sends parameters as array
obj[func].apply(this, parameters); // sends parameters as individual values
2
Jacksonkr 13 nov. 2016 a las 17:37

El siguiente es un ejemplo de ES6 de cómo puede acceder a la propiedad de un objeto utilizando un nombre de propiedad que se ha generado dinámicamente mediante la concatenación de dos cadenas.

var suffix = " name";

var person = {
    ["first" + suffix]: "Nicholas",
    ["last" + suffix]: "Zakas"
};

console.log(person["first name"]);      // "Nicholas"
console.log(person["last name"]);       // "Zakas"

Esto se llama nombres de propiedades calculados

23
try-catch-finally 10 jul. 2017 a las 06:11
4244896