HTML table skip repeating rows in group with JavaScript

Question

I am fetching multiple data from database with AJAX and PHP. After AJAX success I am grouping result data as shown in below images, in which I want a textarea field per group.

I am trying with the following script

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');
  }
}

but it's giving this output:

This is the desired output:

score 1 · Accepted Answer · answered Aug 10 '18 at 16:32

At this point, I'd most likely pivot your data into the format you're looking for. In this case, your response.result grouped by category. I mocked a very simple example of how you can accomplish this via a .forEach() loop, but there are other alternatives like using the .groupBy() function here. (ie. var cats = groupBy(response.result, 'category'))

This now makes it easier to seperate categories from actual elements. See the code below:

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>

its working thank you once again for your precious time. – SamDasti Aug 10 '18 at 16:42 — SamDasti, Aug 10 '18 at 16:42
How can I fetch note from database to this `textarea`. – SamDasti Aug 25 '18 at 06:42 — SamDasti, Aug 25 '18 at 06:42

HTML table skip repeating rows in group with JavaScript

1 Answers1