Group duplicate array to the td and create new tr in table

Question

I'm working this with an hour but i can't figure it out. What i want is want to group fight_declaration the count in to new tr, and merge another fight_declaration to td not a new tr

This is i want to achieve, but thats an example only

    var json = ' [
                    {
                        "fight_declaration": 1,
                        "count": 2
                    },
                    {
                        "fight_declaration": 3,
                        "count": 1
                    }
                ]'

    var data = ''

    $.each(JSON.parse(json),function(key,val) {


        if(val.count > 1) {

            for(let i = 0; i < val.count; i++) {

                data += '<tr>'

                if(val.fight_declaration == 1) {
                    data += '<td><span class="red-dot"></span></td>'
                } else if(val.fight_declaration == 2) {
                    data += '<td><span class="blue-dot"></span></td>'
                } else if(val.fight_declaration == 3) {
                    data += '<td><span class="green-dot"></span></td>'
                } else if(val.fight_declaration == 4) {
                    data += '<td><span class="yellow-dot"></span></td>'
                }

                data += '</tr>'

            }

        } else {

                if(val.fight_declaration == 1) {
                    data += '<td><span class="red-dot"></span></td>'
                } else if(val.fight_declaration == 2) {
                    data += '<td><span class="blue-dot"></span></td>'
                } else if(val.fight_declaration == 3) {
                    data += '<td><span class="green-dot"></span></td>'
                } else if(val.fight_declaration == 4) {
                    data += '<td><span class="yellow-dot"></span></td>'
                }


        }

    })

    $(".trend-table").find("tbody").html(data)

But my problem is it's creating new tr and not achieve what i want in photo above

Thank's Advance

Answer 1

As you are already creating rows to the table and its displaying in row-wise so i think you need to display it column-wise (transpose).So, one solution to this is to construct your trs with equal number of column and rows .Then display the data which is in row as column and vice-versa

In below code i have first get the maximum count from your json array . Then , i have subtracted the max value with count of all json-array then depending on this i have appended extra tds to that row .Now , your table is displayed in row-wise with equal number of row and columns

Then , i have use each loop to iterate through trs which is generated previously and have added all tds under new trs finally removed previous trs .

Below , image will help you to understand difference.

Demo Code :

var json = [{
    "fight_declaration": 1,
    "count": 2
  },
  {
    "fight_declaration": 3,
    "count": 4
  },
  {
    "fight_declaration": 2,
    "count": 6
  },
  {
    "fight_declaration": 4,
    "count": 6
  }

]

var counts;
//loop through json arrays to get max count
for (var i = 0; i < json.length; i++) {
  if (!counts || parseInt(json[i]["count"]) > parseInt(counts["count"]))
    counts = json[i];
}

var data = '';
data += "<table>"
$.each(json, function(key, val) {
  if (val.count > 1) {

    data += '<tr>'
    for (let i = 0; i < val.count; i++) {
      add_colors(val.fight_declaration); //call function to color
    }
    //get extra tds to add in row..respect to max value
    var new_count = counts.count - val.count

    while (new_count > 0) {
  //add extra tds
      data += '<td></td>'
      new_count--;
    }

    data += '</tr>'

  } else {
    add_colors(val.fight_declaration);

  }
})
data += "</table>"
//loop through html generated
var datas = $(data).each(function() {
  var $this = $(this);
  var newrows = [];
  //loop through rows
  $this.find("tr").each(function() {
    var i = 0;
    //get tds
    $(this).find("td").each(function() {
      if (newrows[i] === undefined) {
        newrows[i] = $("<tr></tr>");
      }
      newrows[i].append($(this));
      i++;
    });
  });
  //remove previous trs
  $this.find("tr").remove();
  //add new trs
  $.each(newrows, function() {
    $this.append(this);
  });
});
//add value to the table
$("table.trend-table").html($(datas).html())

function add_colors(values) {

  if (values == 1) {
    data += '<td><span class="red-dot">R</span></td>'
  } else if (values == 2) {
    data += '<td><span class="blue-dot">B</span></td>'
  } else if (values == 3) {
    data += '<td><span class="green-dot">G</span></td>'
  } else if (values == 4) {
    data += '<td><span class="yellow-dot">Y</span></td>'
  }

}

.red-dot {
  background-color: red;
}

.blue-dot {
  background-color: blue;
}

.green-dot {
  background-color: green;
}

.yellow-dot {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="trend-table">

</table>