Tengo este código simple con 5 parámetros tomados de una API que registra datos:

 for (i = 0; i < arr.length-1; i++) { console.log('For Calls') console.log(arr[i].league.name) console.log(arr[i].teams.home.name, arr[i].goals.home) console.log(arr[i].teams.away.name, arr[i].goals.away) }

registra estos datos en la consola (se muestran 2 conjuntos de datos): Datos registrados

El problema que tengo es tratar de mostrar este contenido en bucle en el sitio web, hasta ahora ni siquiera he podido mostrarlo en la pantalla usando los métodos .append.

Aquí está el formato que estoy tratando de crear:

 <div class="parentDiv"> <div class="league">Data goes here</div> <div class="team1">Data goes here</div> <div class="score1">Data goes here</div> <div class="team2">Data goes here</div> <div class="score2">Data goes here</div> </div>

Soy consciente de que puedo darle a cada div una clase y agregarla de esa manera, pero necesito esto en un ciclo para que esos métodos no funcionen para mí en esta circunstancia.

Cualquier consejo es apreciado.

Mi intento actual:

 for (i = 0; i < filtered.length-1; i++) { let parent = document.createElement("div") parent.className = 'parentDiv' let homeTeamName = document.createElement("div") homeTeamName.className = 'league' homeTeamName.innerHTML = filtered[i].league.name parent.appendChild(homeTeamName) let homeTeamScore = document.createElement("div") homeTeamScore.className = 'team1' homeTeamScore.innerHTML = filtered[i].teams.home.name parent.appendChild(homeTeamScore) let awayTeamName = document.createElement("div") awayTeamName.className = 'score1' awayTeamName.innerHTML = filtered[i].teams.home.name parent.appendChild(awayTeamName) let awayTeamScore = document.createElement("div") awayTeamScore.className = 'team2' awayTeamScore.innerHTML = filtered[i].teams.home.name parent.appendChild(awayTeamScore) }

No imprime nada en el dom, página en blanco. Puede usar la consola web en footballify.net/test