0

Tengo el siguiente objeto:

form: {
    validate: false,
    valid: true,
    fields: {

        nombre : {
            value: 'Pablo',
            errors: [
            ],
            rules: [
            ],
        },

        hours : {
            value: {
                start: '10:00 AM',
                end: '11:00 AM',
            },
            errors: [
            ],
            rules: [
            ],
        },
        
    },
},

Quiero acceder a la propiedad form->fields->hours->value A pulso se puede obtener se la siguiente manera: form.fields.hours.value.end

Pero quiero acceder dinámicamente a la propiedad, con un string. Ej, algo como lo siguiente:

form['fields.hours.value.end']

Pero esto obviamente intentara buscar una propiedad llamada fields.hours.value.end (cuyo cual no existe y me devolvera un undefined )

2 respuestas 2

2

El acceso por índice es solo para una propiedad, los puntos dentro de una cadena no separan objetos. Esa forma que estás intentando solo funcionaría en caso de que form tuviera la propiedad definida entre comillas: "fields.hours.value.end"

Debes separar cada propiedad: form['fields']['hours']['value']['end']

Si necesitas hacerlo con una sola cadena, debes crear una función que reciba el objeto y la cadena, separando cada propiedad y analizando si existe o no.

let form = {
    validate: false,
    valid: true,
    "fields.hours.value.end": "Agregada para probar",
    fields: {

        nombre : {
            value: 'Pablo',
            errors: [
            ],
            rules: [
            ],
        },

        hours : {
            value: {
                start: '10:00 AM',
                end: '11:00 AM',
            },
            errors: [
            ],
            rules: [
            ],
        },
        
    },
};

console.log(form["fields.hours.value.end"]);
console.log(form['fields']['hours']['value']['end']);

// Función para buscar usando solo una cadena
function propFromString(obj, str) {
    // Valor a devolver
    let ret = obj;
    // Separar por puntos
    let props = str.split('.');
    // Recorrer arreglo
    for(let i = 0; i < props.length; i ++) {
        // Analizar si el objeto tiene la propiedad
        if(!ret.hasOwnProperty(props[i])) {
            // No la tiene, devolver valor nulo
            return null;
        }
        // Actualizar objeto con la propiedad
        ret = ret[props[i]];
    }
    // Devolver objeto o valor obtenido
    return ret;
}
// Obtener el objeto horas
console.log(propFromString(form, "fields.hours"));
// Obtener el valor de inicio de horas
console.log(propFromString(form, "fields.hours.value.start"));

1

La primera respuesta es acertada y funciona. Sin embargo por aca dejo una con ES5, sencilla.

const form = {
    validate: false,
    valid: true,
    fields: {

        nombre : {
            value: 'Pablo',
            errors: [
            ],
            rules: [
            ],
        },

        hours : {
            value: {
                start: '10:00 AM',
                end: '11:00 AM',
            },
            errors: [
            ],
            rules: [
            ],
        },
        
    },
}

const propFromString = ({obj, str}) => {

        const props = str.split('.');
    
        return props.reduce((old, curr)=>{
        return old[curr];
    },obj);
}

console.log('propFromString',propFromString({
        obj: form,
        str: 'fields.hours.value.start',
}))

1
  • Muy buena respuesta, se simplifica con .reduce().
    – Triby
    Commented el 1 jul. 2021 a las 15:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.