Перемещение текста на новую строку с извлечением данных из Firebase

Question

У меня есть веб-сайт, который показывает результаты из Firebase. Я отображаю данные в таблице и показываю данные в тд тегах. Вот как я получаю свои данные:

var database = firebase.database();

      database.ref('box-label').once('value', function(snapshot) {
        if (snapshot.exists()) {
          var content = '';
          snapshot.forEach(function(data) {
            var val = data.val();
            content += '<td>' + val.brand + '</td>';
            content += '<td>' + val.style + '</td>';
            content += '<td>' + val.color + '</td>';
            content += '<td>' + val.ponumber + '</td>';
            content += '<td>' + val.color + '</td>';
            content += '<td>' + val.xs + '</td>';
            content += '<td>' + val.sm + '</td>';
            content += '<td>' + val.md + '</td>';
            content += '<td>' + val.lg + '</td>';
            content += '<td>' + val.xl + '</td>';
            content += '<td>' + val.xxl + '</td>';
            content += '<td>' + val.xxxl + '</td>';
            content += '<td>' + val.onesize + '</td>';
            content += '<td>' + val.ponumber + '</td>';
            content += '<td>' + val.totalunits + '</td>';
            content += '<td>' + val.boxnumber + '</td>';
            content += '<td>' + val.totalboxes + '</td>';
            content += '<td> ' + val.boxweight + '</td>';

          });
          $('#the__carton__results').append(content);
        }
      });

Это работает хорошо, с одной записью из базы данных, однако, если есть более одной записи из базы данных, макет нарушается. Например: это с 2 записями Первая запись заканчивается Mikk7, и я хотел бы показать следующие записи в следующей строке, чтобы она выровнялась вправо.

Мой стиль для стола выглядит так:

  tr#the__carton__results__table{
      font-size: 9px;
      font-weight: 900;
      font-family: Helvetica;
      text-align: center;
  }

  tr#the__carton__results{
      font-size: 9px;
      font-weight: 900;
      font-family: Helvetica;
      text-align: center;
  }

Answer 1

Вы постоянно добавляете ячейки в одну и ту же строку таблицы. Таким образом, это означает, что в итоге вы получите одну строку для всех продуктов.

Вам, вероятно, понадобится сгенерировать новую строку для каждого продукта:

var database = firebase.database();

database.ref('box-label').once('value', function(snapshot) {
  var content = '';
  snapshot.forEach(function(data) {
    content += '<tr>';
    var val = data.val();
    content += '<td>' + val.brand + '</td>';
    content += '<td>' + val.style + '</td>';
    content += '<td>' + val.color + '</td>';
    content += '<td>' + val.ponumber + '</td>';
    content += '<td>' + val.color + '</td>';
    content += '<td>' + val.xs + '</td>';
    content += '<td>' + val.sm + '</td>';
    content += '<td>' + val.md + '</td>';
    content += '<td>' + val.lg + '</td>';
    content += '<td>' + val.xl + '</td>';
    content += '<td>' + val.xxl + '</td>';
    content += '<td>' + val.xxxl + '</td>';
    content += '<td>' + val.onesize + '</td>';
    content += '<td>' + val.ponumber + '</td>';
    content += '<td>' + val.totalunits + '</td>';
    content += '<td>' + val.boxnumber + '</td>';
    content += '<td>' + val.totalboxes + '</td>';
    content += '<td> ' + val.boxweight + '</td>';
    content += '</tr>';

  });
  $('#the__carton__results').parent().append(content);
});