javascript data not appending to html webpage?

Question

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.

My current attempt:

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)

  
  }

It prints nothing to the dom, blank page. You can use the web console at footballify.net/test

Can you update the question a a runnable code snippet as a minimal reproducible example? You can hard-code test data to be appended to the DOM. Though at a glance it looks like your code simply never appends parent to the DOM... — David
– David, Commented May 19, 2022 at 12:25
You never do anything with parent. It's a div created in memory, with a bunch of stuff attached to it but parent itstelf is never attached to the DOM. — VLAZ
– VLAZ, Commented May 19, 2022 at 12:27

Voidy · Accepted Answer · 2022-05-19 12:46:18Z

1

You never Attach the "parent" variable to your body

Try:

document.body.append(parent) at the end

answered May 19, 2022 at 12:46

Voidy

3416 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript data not appending to html webpage?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related