JavaScript - Mostrar una lista mediante forEach

Pos: 197

Val: 12

Mostrar una lista mediante forEach

Publicado por Jessica (6 intervenciones) el 22/03/2020 03:36:38

Buenas noches, es la primera vez que posteo (mejor dicho estoy aprendiendo a programar) espero poder dejarme entender y puedan ayudarme. Estoy intentando mostrar los 5 primeros registros de una lista (nombre y año) . Pero me muestra un mensaje de error :

main.js:16 Uncaught TypeError: Cannot read property 'forEach' of undefined
at atletasNames (main.js:16)
at Array.forEach (<anonymous>)
at main.js:202

// Aqui el codigo:

const atletasNames = (element, index) => {

  let elementos = '';

 element.disciplinas.forEach((objeto) => {

  if (index > 4) {

   elementos = `<tr id="masAtletas" class="mostrarTr hideData"><td>${element.name}

   <span class="tableLeft">${objeto.año}</span></td></tr>`;

  return elementos;

});

};

// Aqui la linea 202

    ${data.atletas.map(atletasNames).join('')}

Agradeceria toda ayuda o consejo que puedan darme.GRACIAS!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.506

Mostrar una lista mediante forEach

Publicado por joel (895 intervenciones) el 22/03/2020 13:45:59

El error creo que lo tienes en el archivo main.js en la linea 16!!!

Según entiendo, no esta definida la variable atletasNames en un forEach

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 197

Val: 12

Mostrar una lista mediante forEach

Publicado por Sandra (6 intervenciones) el 22/03/2020 14:06:26

Hola!, si en efecto, el error dice estar en la linea 16 que es:

element.disciplinas.forEach((objeto) => {

Y si quitará esta linea me funciona todo lo demás y la linea 202 me reconocería sin problemas la variable atletasNames. Pero al hacer esto perdería el argumento objeto que uso luego para traer otro dato que busco con el forEach y que esta dentro de element:

<span class="tableLeft">${objeto.año}</span></td></tr>`;

Mi lio es el porqué no me reconoce el forEach. Sé que algo estoy haciendo mal pero no encuentro la solución.

Hice un console.log y si me muestra los datos que necesito.

// console en linea 20

console.log (element.name + objeto.año);

Nota: adjunto una imagen con lo que sale en consola.

Agradecería una manito en esto, Gracias!

console

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Mostrar una lista mediante forEach

Publicado por joel (895 intervenciones) el 22/03/2020 19:34:04

Hola Sandra, la verdad es que solo con el código que muestras, no tengo la capacidad de averiguar que puede estar pasando... es posible que publiques el código entero?

Valora esta respuesta

Comentar

Pos: 197

Val: 12

Mostrar una lista mediante forEach

Publicado por Sandra (6 intervenciones) el 22/03/2020 21:32:20

Por supuesto Joel!
Aquí el código index.html:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>JUEGOS OLIMPICOS</title>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <header>

      <h1>JUEGOS OLIMPICOS SIGLO XXI</h1>

      <nav class="navegador">

        <ul>

          <li><a id="btnByName" href="#byName">MIRA MAS DE ATLETAS</a></li>

        </ul>

      </nav>

    </header>

    <div id="containerMain" class="negro hideData">

    </div>

    <div id="athleteProfile">

    </div>

    <section id="byName" class="appearance hideData ">

    </section>

    <div id="dVerMas" class="centrado hideData" >

      <button id="btnVerMas"><strong>VER MAS ATLETAS</strong></button>

    </div>

    <div id="root"></div>

    <script src="main.js" type="module"></script>

  </body>

  <footer>

    <p>© Derechos Reservados</p>

  </footer>

</html>

Aquí main.js :

// import { example } from './data.js';

import data from './data/atletas/atletas.js';

// import atletasNames from './data.js';

// import markupTable from './data.js';

const containerMain = document.getElementById('containerMain');

containerMain.classList.remove('hideData');

const byName = document.getElementById('byName');

const btnByName = document.getElementById('btnByName');

const dVerMas = document.getElementById('dVerMas');

const btnVerMas = document.getElementById('btnVerMas');

// muestra una lista de atletas y año de olimpiada

const atletasNames = (element, index) => {

  let elementos = '';

 element.disciplinas.forEach((objeto) => {

  if (index <5) {

   elementos = `<tr id="masAtletas" class="mostrarTr hideData"><td>${element.name}

   <span class="tableLeft">${objeto.año}</span></td></tr>`;

   console.log (element.name + objeto.año);

  return elementos;

});

};

// botón del menú "MIRA MAS ATLETAS"

btnByName.addEventListener('click', () => {

  containerMain.classList.add('hideData');

  byName.classList.remove('hideData');

  dVerMas.classList.remove('hideData');

});

// botón "Ver más atletas"

btnVerMas.addEventListener('click', () => {

  document.getElementById('masAtletas').classList.remove('hideData');

});

// tabla de nombres de atletas

const markupTable = `

<div>

<h1 class="title">ATLETAS OLIMPICOS</h1>

<table class="tableContent">

    <thead>

      <th >Nombre <span class="tableTitleLeft"></span></th>

      <th> Olimpiada <span class="tableTitleLeft"></span></th>

    </thead>

    <tbody>

    ${data.atletas.map(atletasNames).join('')}

    </tbody>

</table>

`;

document.getElementById('byName').innerHTML = markupTable;

Valora esta respuesta

Comentar

Pos: 167

Val: 14

Mostrar una lista mediante forEach

Publicado por Sebastian (5 intervenciones) el 23/03/2020 00:13:52

Hola
El error que te da la consola es por que de element llamas a disciplinas

element.disciplinas

Y resulta que disciplinas esta indefinido, que no lo instancias

Tocaría revisar en donde es que se llena la variable disciplinas

Espero te sirva

Valora esta respuesta

Comentar

Pos: 197

Val: 12

Mostrar una lista mediante forEach

Publicado por Sandra (6 intervenciones) el 24/03/2020 04:23:23

Agradezco tu observación :)

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Mostrar una lista mediante forEach

Publicado por joel (895 intervenciones) el 23/03/2020 08:30:47

Hola Sandra, que hay dentro del archivo atletas.js??

Valora esta respuesta

Comentar

Pos: 197

Val: 12

Mostrar una lista mediante forEach

Publicado por Sandra (6 intervenciones) el 23/03/2020 13:13:26

Cierto, debí adjuntar
atletas.js

export default {

  'atletas' :[

      "id": 11799,

      "name": "Matteo Bisiani",

      "gender": "M",

      "height": "184",

      "weight": "85",

      "date-birth": 1976,

      "sport": "Archery",

      "game": "2000 Summer",

      "team": "Italy",

      "noc": "ITA",

      "disciplinas": [

          "disciplina": "Archery Men's Team",

          "temporada": "Summer",

          "año": 2000,

          "ciudad": "Sydney",

          "medalla": "Silver"

},

      "id": 16488,

      "name": "Nataliya Andrivna Burdeina",

      "gender": "F",

      "height": "165",

      "weight": "63",

      "date-birth": 1974,

      "sport": "Archery",

      "game": "2000 Summer",

      "team": "Ukraine",

      "noc": "UKR",

      "disciplinas": [

          "disciplina": "Archery Women's Team",

          "temporada": "Summer",

          "año": 2000,

          "ciudad": "Sydney",

          "medalla": "Silver"

},

... y así continua, mas registros con la misma estructura.

Por si acaso adjunto CSS :)

.tableContent{

    width: 75%;

    margin: auto;

td{

    border-bottom: 1px solid rgb(189, 188, 188);

    display: inline-flex;

    padding: 2%;

    width: 100%;

td:hover {background-color: #f5f5f5;}

.tableLeft{

    display: inline;

    margin-left: auto;

    margin-right: 0;

.tableTitleLeft{

    padding-left: 35%;

    padding-right: 0;

th{

    padding: 5%;

.appearance{

  width: 60%

.negro{

  background-color: black;

.hideData{

  display: none;

.centrado{

text-align: center;

button{

  cursor: pointer;

  border: 1px inset rgb(0, 0, 0);

  font-size: 13px;

  color: #FFFFFF;

  padding: 0.5em 1em;

  font-family: 'Lora', serif;

  background: #D64045;

  box-sizing: border-box;

  border-radius: 18px;

footer{

    display: block;

    width: 100%;

    height: 52px;

    background: rgba(51, 54, 59, 0.82);

Y gracias nuevamente...

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Mostrar una lista mediante forEach

Publicado por joel (895 intervenciones) el 23/03/2020 16:46:37

Gracias Sandra... ahora si lo he podido probar...

El problema esta aquí:

const atletasNames = (element, index) => {

  let elementos = '';

 element.disciplinas.forEach((objeto) => {

  if (index <5) {

   elementos = `<tr class="mostrarTr hideData"><td>${element.name}

   <span class="tableLeft">${objeto.año}</span></td></tr>`;

   console.log (element.name + objeto.año);

  return elementos;

});

};

Esta función es llamada mediante map, por lo que no se porque haces ese forEach dentro... si cambias esa función por esta:

const atletasNames = (element, index) => {

   return `<tr class="mostrarTr hideData"><td>${element.name}

   <span class="tableLeft">${element.disciplinas[0]["año"]}</span></td></tr>`;

};

Ya nos comentaras...

Valora esta respuesta

Comentar

Pos: 197

Val: 12

Mostrar una lista mediante forEach

Publicado por Sandra (6 intervenciones) el 24/03/2020 04:28:20

JOEL!!!!!! ,con la sugerencia que me diste modifiqué mi código y ¡FUNCIONÓ! , estoy contenta, hoy aprendí algo más.

¡GRACIAS INFINITAS!

Valora esta respuesta

Comentar

¿Cual sería la mejor combinación de tecnologías JavaScript para desarrollar un ERP?

Script para freefire