How do i show object only once in foreach loop?

Question

i have a few object and i want them to be sorted in clusters. My current code has above every it's cluster but i want it to be shown only once for each cluster.

var Applications =



 [

{cluster: 'WS', ID: '3113', Name: 'management'},

{cluster: 'WS', ID: '3116', Name: 'Calculator'},

{cluster: 'MIS', ID: '113', Name: 'Mandate'},

{cluster: 'MIS', ID: '116', Name: 'Currency'},
]

var content = "";
Applications.forEach(generateRow);



function generateRow(item, index, arrays) {

    var columns = "";
    var clusterhead ;


    clusterhead = columns + "<td colspan='3'>" + item.cluster + "</td>"  ;
    columns = columns + "<td onclick='testfn(\"" + index + "\", this)'>" +  item.ID + "</td>";
    columns = columns + "<td>" + item.Name + "</td>";
    columns = columns + "<td>" + "<a href='https:" + item.ID + "/ApplicationDetails/'>map</a>" + "</td>";

    content =  content +  "<tr>" + clusterhead + "</tr>" + "<tr>" + columns + "</tr>";

}

// Right now the outcome is this.

      WS
3113 managment appmap
      WS
3116 Calculator appmap

I want to look like this

      WS
3113 managment appmap
3116 Calculator appmap

Answer 1

var Applications = [
  { cluster: 'WS', ID: '3113', Name: 'management' },
  { cluster: 'WS', ID: '3116', Name: 'Calculator' },
  { cluster: 'MIS', ID: '113', Name: 'Mandate' },
  { cluster: 'MIS', ID: '116', Name: 'Currency' },
]

let printedClusters = [];
var content = "";

Applications.forEach(generateRow);
$('#tbl').append(content)

function generateRow(item, index, arrays) {

  var columns = "";
  var clusterhead = "";

  if (!printedClusters.includes(item.cluster)) {
    clusterhead = columns + "<td colspan='3'>" + item.cluster + "</td>";
    printedClusters.push(item.cluster);
  }

  columns = columns + "<td onclick='testfn(\"" + index + "\", this)'>" + item.ID + "</td>";
  columns = columns + "<td>" + item.Name + "</td>";
  columns = columns + "<td>" + "<a href='https:" + item.ID + "/ApplicationDetails/'>map</a>" + "</td>";

  content = content + "<tr>" + clusterhead + "</tr>" + "<tr>" + columns + "</tr>";

}

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