JavaScript - problema al enviar objeto a una función

 
Vista:
sin imagen de perfil
Val: 13
Ha aumentado su posición en 177 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

problema al enviar objeto a una función

Publicado por Davit (19 intervenciones) el 27/11/2021 14:10:31
Buenas a todos!

Tengo la siguiente función:
1
2
3
4
5
6
7
8
document.addEventListener('DOMContentLoaded', async() => {
        const parametrosURL = new URLSearchParams(window.location.search);
 
        const idCliente  = parseInt(parametrosURL.get('id'));
        const cliente = await obtenerCliente(idCliente);
        console.log({cliente});  //aquí me devuelve el objeto del cliente perfecto, como debería ser
        mostrarCliente(cliente);
    });

El problema viene cuando paso este objeto cliente a otra función, para que los atributos del objeto aparezcan en los campos de un formulario para poder editarlos. Los paso a una función y al hacer un console.log del objeto dentro de la función me devuelve undefined

esta es la función:

1
2
3
4
5
6
7
8
9
10
function mostrarCliente(cliente) {
        console.log({cliente});
        const {nombre, empresa, email, telefono, id} = cliente;
        nombreInput.value = nombre;
        emailInput.value = email;
        empresaInput.value = empresa;
        telefonoInput.value = telefono;
        idInput.value = id;
 
    }

Así que a partir de ahí ya no me deja hacer el destructuring del objeto obviamente ni nada más.
¿Qué puedo estar haciendo mal?

Un saludo y gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de 7aamin
Val: 9
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

problema al enviar objeto a una función

Publicado por 7aamin (79 intervenciones) el 28/11/2021 02:04:26
A mi tambien me suele pasar ese problema cuando uso asincronia basado solo en async y await..! Asi que lo soluciono retornando una promesa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const obtenerCliente = (idCliente) => {
    return new Promise(resolve => {
        //Haz aqui tu codigo que haga toda la gestion para obtener clientes
        //retorna tu respuesta con resolve()
        if (cliente) resolve(cliente);
    });
}
 
document.addEventListener('DOMContentLoaded', async () => {
    const parametrosURL = new URLSearchParams(window.location.search);
    const idCliente  = parseInt(parametrosURL.get('id'));
    const cliente = await obtenerCliente(idCliente);
    //Aqui tu codigo se detendra hasta obtener los clientes
    //La funcion mostrarClientes() NO se ejecutara hasta que obtenerClientes() se resuelva
    mostrarCliente(cliente);
});
 
function mostrarCliente(cliente) {
    console.log({cliente});
    const {nombre, empresa, email, telefono, id} = cliente;
    nombreInput.value = nombre;
    emailInput.value = email;
    empresaInput.value = empresa;
    telefonoInput.value = telefono;
    idInput.value = id;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 13
Ha aumentado su posición en 177 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

problema al enviar objeto a una función

Publicado por Davit (19 intervenciones) el 28/11/2021 19:46:00
Gracias!
Tengo que darle una vuelta porque el promise me devuelve algo que no quiero, pero por lo menos así la función principal recibe el dato de la otra. Aun así me queda la duda de por qué se comporta así con async y await
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de 7aamin
Val: 9
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

problema al enviar objeto a una función

Publicado por 7aamin (79 intervenciones) el 28/11/2021 20:49:51
Te soy sincero.. NO LO SE.. jaja pero siempre uso asi para que haga la asincronia como debe ser, espero te haya funcionado
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 13
Ha aumentado su posición en 177 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

problema al enviar objeto a una función

Publicado por Davit (19 intervenciones) el 30/11/2021 19:09:11
Acabo de sacar un rato y lo he resulto detenidamente, me había comido una línea y no había manera pero ya está.

1
2
3
4
5
6
7
8
9
10
11
12
export const obtenerCliente = id => {
    return new Promise( (resolve, reject) => {
        fetch(`${url}/${id}`)
            .then(resultado => {
                console.log(resultado);
                resultado = resultado.json(resultado);
                console.log(resultado);
 
                if (resultado) resolve(resultado);
            })
        })
}

Oye, pues no me voy a quedar con la duda a ver si encuentro el porqué y lo comparto. Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar