Таблица html пропускает повторяющиеся строки в группе с помощью javascript

Я получаю несколько данных из базы данных с помощью AJAX и PHP. После успеха AJAX я группирую данные результатов, как показано на изображениях ниже, в которых мне нужно поле textarea для каждой группы.

Я пытаюсь использовать следующий сценарий

function getResult(id = null) {
  if (id) {
    $.ajax({
      url: 'fetch.php',
      type: 'post',
      data: {id: id},
      dataType: 'json',
      success: function(response) { 
        var lastCategory = null;
        response.result.forEach(function(element) {
          console.log(element);
          var category = element.category;
          var names = element.name;
          var Result = element.result;
          var note = element.note;
          if (lastCategory != category) {
            $('table tr').length;
            html = '<tr>';
            html += '<td><p>'+category+'</p></td>';
            html += '</tr>';
            $('table').append(html);
            lastCategory = category;
          }
          $('table tr').length;
          html = '<tr>';
          html += '<td><p>' + names + '</p></td>';
          html += '<td><p>' + Result + '</p></td>';
          html += '</tr>';
          $('table').append(html);
          $('table tr').length;
          html = '<tr>';
          html += '<td><textarea placeholder="textarea...">' + note + '</textarea></td>';
          html += '</tr>';
          $('table').append(html);
        });
      }
    });
  } else {
    alert('error');
  }
}

но он дает такой результат:

enter image description here

Это желаемый результат:

enter image description here

2
0
231
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На этом этапе я, скорее всего, преобразовал бы ваши данные в формат, который вы ищете. В этом случае ваш response.result сгруппирован по category. Я высмеивал очень простой пример того, как вы можете сделать это с помощью цикла .forEach(), но есть и другие альтернативы, такие как использование функции .groupBy()здесь. (например, var cats = groupBy(response.result, 'category'))

Теперь это упрощает отделение категорий от фактических элементов. См. Код ниже:

var response = {
  result: [
    {category: 'Team A', name: 'Jema', result: 43},
    {category: 'Team B', name: 'Deno', result: 34},
    {category: 'Team B', name: 'Niob', result: 56},
    {category: 'Team B', name: 'Skion', result: 49},
  ],
};

var cats = {};

response.result.forEach(function(element) {
  cats[element.category] = cats[element.category] || [];
  cats[element.category].push(element);
});

Object.keys(cats).forEach(function(category) {
  let html = '';
  
  // Append the category header
  html = '<tr>';
  html += '<td><p>'+category+'</p></td>';
  html += '</tr>';
  $('table').append(html);
  
  // Loop through the results for this category
  cats[category].forEach(function(element) {
    var names = element.name;
    var result = element.result;
    html = '<tr>';
    html += '<td><p>' + names + '</p></td>';
    html += '<td><p>' + result + '</p></td>';
    html += '</tr>';
    $('table').append(html);
  });
  
  // Append the textarea at the end of the results
  html = '<tr>';
  html += '<td><textarea placeholder="textarea..."></textarea></td>';
  html += '</tr>';
  $('table').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>

его работа еще раз спасибо за ваше драгоценное время.

SamDasti 10.08.2018 18:42

Как я могу получить заметку из базы данных на этот textarea.

SamDasti 25.08.2018 08:42

Другие вопросы по теме