3

Tengo un array de objetos y varios botones, cada botón corresponde a un objeto del array, quiero que al darle click a cualquier botón se imprima por consola el objeto de ese botón y los objetos correspondientes del siguiente y el anterior. Lo que he hecho es:

  1. Crear los botones dinámicamente y agregarlos al nodo padre.
  2. Asignarle un evento 'click' al nodo usando delegación de eventos, que es escuchar exclusivamente el evento de los elementos que tengan el titulo 'boton'.
  3. Una vez le de click al botón, imprimir por consola el nodo de ese elemento.

<!DOCTYPE html>
<html lang="es">

<head>
  <title>LMI. Exercicis 5.5</title>
  <meta charset="utf-8" />
</head>

<body>

<div class="ctr"></div>

<script>
// array de objetos
const menu = [
    {
        title: 'Plato 1',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    },
    {
        title: 'Plato 2',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    },
    {
        title: 'Plato 3',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    },
    {
        title: 'Plato 4',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
        
    },
    {
        title: 'Plato 5',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    }
  ]
  
  //uso reduce para ponerle 'keys' a cada objeto del array
 const indexed = menu.reduce((acum, elem)  => ({
      ...acum,
      [elem.title]: elem,
 }), {})
 //creo un array de keys para usarlo en el for
 const keys = Object.keys(indexed)
  
  //crea los botones
  const createBtn = (id) => {
  
    const btn = document.createElement('button')
    btn.innerText = `${indexed[id].title}`
    btn.setAttribute('title', 'boton')
    
    return btn
  }
  //agrego los botones al nodo
  const nodo = document.querySelector('.ctr')
  
  const addBtn = (id) =>{
    const newBtn = createBtn(id)
    
    return nodo.append(newBtn)
  }
  
 //itero el array de keys para crear los botones
 function render() {
  for(let i = 0; i < keys.length; i++){
      addBtn(keys[i])
  }
}
render()

//aplicando delagacion de eventos
nodo.addEventListener('click', getObjects)
function getObjects(e){
  if(e.target.title === 'boton'){
    console.log(e.target)
  }
}


  
  
  
  
  
</script>

</body>
</html>

1 respuesta 1

4

Lo primero es que el ID de tu objeto debe ser un número y ser incrementable, de esta manera es fácil determinar el siguiente y el anterior. Caso contrario es un lio.

Para esto, modificamos un poco el reduce, agregando el argumente del indice

//                                        v-- Agregamos index
const indexed = menu.reduce((acum, elem,index)  => ({
      ...acum,
      [index]: elem, //ahora el key del objeto es un número
 }), {})

Luego necesitamos que el botón tenga una referencia al id del objeto, para eso le asignamos un atributo "data-id" cuando se crea

btn.setAttribute('data-id', id);

y para recuperarlo en el evento click, hacemos

let id = e.target.getAttribute("data-id");

Código completo:

<!DOCTYPE html>
<html lang="es">

<head>
  <title>LMI. Exercicis 5.5</title>
  <meta charset="utf-8" />
</head>

<body>

<div class="ctr"></div>

<script>
// array de objetos
const menu = [
    {
        title: 'Plato 1',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    },
    {
        title: 'Plato 2',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    },
    {
        title: 'Plato 3',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    },
    {
        title: 'Plato 4',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
        
    },
    {
        title: 'Plato 5',
        description: 'lorem ipsum lorem ipsum',
        price: '$00.00'
    }
  ]
  
  //uso reduce para ponerle 'keys' a cada objeto del array
 const indexed = menu.reduce((acum, elem,index)  => ({
      ...acum,
      [index]: elem,
 }), {})
 

 //creo un array de keys para usarlo en el for
 const keys = Object.keys(indexed)
  
  //crea los botones
  const createBtn = (id) => {
  
    const btn = document.createElement('button');
    btn.innerText = `${indexed[id].title}`;
    btn.setAttribute('title', 'boton');
    btn.setAttribute('data-id', id);
    return btn;
  }
  //agrego los botones al nodo
  const nodo = document.querySelector('.ctr')
  
  const addBtn = (id) =>{
    const newBtn = createBtn(id)
    return nodo.append(newBtn)
  }
  
 //itero el array de keys para crear los botones
 function render() {
  for(let i of keys){
      addBtn(i);
  }
}
render()

//aplicando delagacion de eventos
nodo.addEventListener('click', getObjects)
function getObjects(e){
  if(e.target.title === 'boton'){
    let id = e.target.getAttribute("data-id");
    console.log(indexed[id-1]);  //anterior
    console.log(indexed[id]);  //actual
    console.log(indexed[Number(id)+1]); //siguiente 
  }
}


</script>

</body>
</html>

Obviamente el casos bordes entrega undefined, que para mis es correcto. Si tu necesitas otra salida pones un if y validas según sea el caso

1
  • Gracias! es justo lo que necesitaba. Commented el 27 ene. 2023 a las 12:27

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.