I have this simple code with 5 paramaters taken from an API that logs data:
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)
}
it logs this data to the console (2 sets of data shown): Logged Data
The issue I am having is trying to display this looped content to the website, I haven't even been able to get it on the screen so far using the .append methods.
Here is the format I am trying to create:
<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>
I am aware I can give each div a class and append that way but I need this in a loop so those methods do not work for me in this circumstance.
Any Tips are Appreciated.
function append() {
let arr = [{ name: 'name1', goals: 'goals1' }, { name: 'name2', goals: 'goals2' }, { name: 'name3', goals: 'goals3' }]
for (i = 0; i < arr.length; i++) {
let parent = document.createElement("div")
parent.className = 'parentDiv'
let newElement = document.createElement("div")
newElement.className = 'league'
newElement.innerHTML = arr[i].name
parent.appendChild(newElement)
let newElement2 = document.createElement("div")
newElement2.className = 'goals'
newElement2.innerHTML = arr[i].goals
parent.appendChild(newElement2)
document.body.appendChild(parent)
}
}