Проблема отображения данных из Firebase в таблицу?

Question

Я пытаюсь отобразить данные из базы данных Firebase Realtime в мою таблицу. Я попал в точку, где данные правильно отформатированы, но не в виде списка. Мой результат таков:

Что я хочу сделать, это показать в виде вертикального списка городов, включая штат вверху.

    ///Variables including the documents form html
    var head = document.getElementById('tableHead');
    var body = document.getElementById('tableBody');
    var tr = document.createElement('tr');

    ///Access to database 
    var ref = firebase.database().ref('vibes');
    ref.child('state').on('value', gotVibeData);

    function gotVibeData(snapshot) {
        snapshot.forEach(vibeSnapshot => {
            var stateKey = vibeSnapshot.key;    
            Vibes.stateName = stateKey;

            var th = document.createElement('th');
            th.innerText = Vibes.stateName;
            tr.appendChild(th);
            head.appendChild(tr);

            ref.child('state').child(stateKey).child('city').on('value', function(snapshotCity) {
                snapshotCity.forEach(citySnap => {
                    var cityKey = citySnap.key;
                    Vibes.cityName = cityKey;

                    var td = document.createElement('td');
                    td.innerText = cityKey;
                    tr.appendChild(td);
                    body.appendChild

                });
            });
        });
    }

    class Vibes {
        constructor(stateName, cityName) {
            this.stateName = stateName;
            this.cityName = cityName;
        }
    }

</script>

Код выше - тот, который дает результат. Мой код создает th внутри тела

Answer 1

В вашем коде вы использовали только один tr, который помещает все данные в одну строку:

<tr> <th></th> <td></td> <td></td> </tr>

Но вам нужно:

<tr> <th></th> </tr>
<tr> <td></td> </tr>
<tr> <td></td> </tr>

Попробуйте добавить по одной строке каждый раз, когда вы встречаете cityKey или city в следующем случае:

///Variables including the documents form html
var head = document.getElementById('tableHead');
var body = document.getElementById('tableBody');

function gotVibeData() {
    /*snapshot.forEach(vibeSnapshot => {
      var stateKey = vibeSnapshot.key;
      Vibes.stateName = stateKey;*/
      var trHead = document.createElement('tr');
      var th = document.createElement('th');
      th.innerText = 'CA';
      trHead.appendChild(th);
      head.appendChild(trHead);


      ['city1', 'city2'].forEach(city => {
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        td.innerText = city;
        tr.appendChild(td);
        body.appendChild(tr);

      });
    /*});
  });*/
}

/*class Vibes {
  constructor(stateName, cityName) {
    this.stateName = stateName;
    this.cityName = cityName;
  }
}*/

gotVibeData();

<table>
  <thead id="tableHead">
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>