How do I add values in another column in my table with javascript?

Question

I’m using append to generate my table, but each row is being generated by a ForEach, but now that I have managed to generate the first column I have no idea how to generate the other

let TrackerList = document.getElementById('TrackerList');

firebase.database().ref('users').on('value', function (snapshot) {
  TrackerList.innerHTML += '';
  snapshot.forEach(function (item) {
     item.forEach(function (navigation) {
        result = navigation.val();
        result.map((resultado, index) => {
            var tr = document.createElement('tr');
            var td = document.createElement('td');      
            td.appendChild(document.createTextNode(resultado.params['campaign']))
             tr.appendChild(td);
             TrackerList.appendChild(tr);
             console.log(resultado)
           })
        })
     })
  })

   <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <thead>
          <tr>
            <th>Campanha</th>
            <th>Canal</th>
            <th>Tráfego</th>
            <th>Vendas</th>
            <th>Conversão</th>
            <th>LandingPage</th>
          </tr>
        </thead>
        <tbody id="TrackerList">
        </tbody>
   </table>

Answer 1

There’s an example code. You create the line (TR) and enter the data (TD’s) on this line and then move the row to the table (Trackerlist).

Data from a data table is a vector, so just enter them in the order of the headers.

The first header is the Campaign, so this should be the first cell of each row. I generated the table with numbers to illustrate.

Take this link too... It may be useful.

HTML DOM Tabledata Object - W3 Schools

let TrackerList = document.getElementById('TrackerList');
  
  //Gerando dados falsos
  
  var x = 0;
  while(x < 5) { // Para cada linha
    var tr = document.createElement('tr');
    
    TrackerList.appendChild(tr);
    var y = 0;
    while(y < 6) { // Para cada coluna
      let td = document.createElement('td'); // Crio o dado
      td.appendChild(document.createTextNode(y)); // Passo o dado. No caso do seu exemplo foi o resultado[campaign] ou algo assim...
      
      // Isso aqui não é necessário, mas fiz pra você entender como funciona.
      if(y == 0) {
        td.headers = "Campanha";
      }else if(y==1) {
        td.headers = "Canal";
      }else if(y==2) {
        td.headers = "Tráfego";
      }else if(y==3) {
        td.headers = "Vendas";
      }else if(y==4) {
        td.headers = "Conversão";
      }else if(y==5) {
        td.headers = "LandingPage";
      }
      
      tr.appendChild(td); // Subo o td pra linha.
      y++;
    }
    TrackerList.appendChild(tr); // Subo a linha pra tabela, após adicionar todas as colunas.
    x++;
  }
  
  
  // Console log pra você entender melhor como trabalhar com table...
  
  console.log(TrackerList.rows);
  console.log(TrackerList.rows[0].cells);
  
  console.log(TrackerList.rows[0].cells[0].headers);
  console.log(TrackerList.rows[0].cells[1].headers);
  console.log(TrackerList.rows[0].cells[2].headers);
  console.log(TrackerList.rows[0].cells[3].headers);
  console.log(TrackerList.rows[0].cells[4].headers);
  console.log(TrackerList.rows[0].cells[5].headers);

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnadd">add</button>
<table class="zui-table">
        <thead>
          <tr class="TrackerListHeader">
            <th>Campanha</th>
            <th>Canal</th>
            <th>Tráfego</th>
            <th>Vendas</th>
            <th>Conversão</th>
            <th>LandingPage</th>
          </tr>
        </thead>
        <tbody id="TrackerList">
        </tbody>
   </table>