0

Por favor, tengo una duda aqui sobre insertar elemento en un codigo HTML a través de Javascript. Estoy haciendo una pruebas de insertar elementos que son alimentados por un objeto de dos elementos. Es decir, un arreglo de objetos. Utilizo una funcion para crear los elementos a ser incorporados en el HTML, y utilizo el metodo de innerHTML para incluirlos en el DOM. Como son dos elementos utilizo un forEach y dentro de el un for para llegar a cada uno de los elementos.

El codigo que estoy utilizado es el siguiente:

  function insertarProducto() {
         
         const totalProductos = productoPrueba.length;
         productoPrueba.forEach( producto => {
     
             for (let i = 0; i <= totalProductos; i++) {
                 const resumenProductos = document.createElement('tr');
                 resumenProductos.appendChild(imagen);
         
                 resumenProductos.innerHTML += 
                 `
                 <td>${productoPrueba[i].Descripcion}</td>
                 <td>${productoPrueba[i].Precio}</td>
                 <td>${productoPrueba[i].Moneda}</td>
                 <td>${productoPrueba[i].Cantidad}</td>
                 
                 `;
         
                 Compras.appendChild(resumenProductos);
     
             }

Cuando ejecuto esas lineas, el codigo deja de fucnionar y me aparece un TypeError indicando que la propiedad esta indefinida, por lo que no me permite aplicar las demas funciones.

Alguien me podria indicar que ven alli que hace que me aparezca el TypeError? o al menos que esta errado alli?

2
  • 1
    ¿Viste que tus ciclos anidados son iguales? productoPrueba.forEach() es lo mismo que for(let i = 0; i < productoPrueba.length; i++) {}
    – Triby
    Commented el 18 ene. 2021 a las 3:11
  • Pareciera que hace el ciclo dos veces, una vez con el .forEach() y luego con el for. Si mal no me equivoco terminarás repitiendo todos los productos por cada producto que tengas. Conserva solo un ciclo y creo debería bastar
    – Japsz
    Commented el 18 ene. 2021 a las 3:13

2 respuestas 2

2

Parece ser que tu problema es el <= que usas en tu ciclo for, haciendo que iteres una vez más de lo que necesitas. Es decir, si tu lista tiene largo 10, solo tiene índices del 0 al 9, pero tu ciclo termina con i=10 por lo que productoPrueba[10] es undefined.

Usa < y debería funcionar

0

Te falto cerrar un parentesis y dos llaves, el parentesis del forEach y las llaves del ciclo for y la function:

function insertarProducto() {

  const totalProductos = productoPrueba.length;
  productoPrueba.forEach(producto => {

    for (let i = 0; i <= totalProductos; i++) {
      const resumenProductos = document.createElement('tr');
      resumenProductos.appendChild(imagen);

      resumenProductos.innerHTML +=
        `
         <td>${productoPrueba[i].Descripcion}</td>
         <td>${productoPrueba[i].Precio}</td>
         <td>${productoPrueba[i].Moneda}</td>
         <td>${productoPrueba[i].Cantidad}</td>
                 
       `;

      Compras.appendChild(resumenProductos);

    }

  });

}

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.