Как показать объект только один раз в цикле foreach?

Question

У меня есть несколько объектов, и я хочу, чтобы они были отсортированы по кластерам.Мой текущий код имеет над каждым кластером, но я хочу, чтобы он показывался только один раз для каждого кластера.

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>";

}

// Сейчас результат таков.

      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>

Answer 2

Одним из решений было бы создание временного словаря для их сортировки, а затем для отображения данных вашего диктанта.

myDict = [];
data = [{'cluster': 1, 'data': 'yes'}, {'cluster': 2, 'data': 'no'}, {'cluster': 1, 'data': 'yes'}];

data.forEach(elem => {
    if(myDict[elem.cluster])
        myDict[elem.cluster].push(elem.data);
    else
        myDict[elem.cluster] = [elem.data];
})

Таким образом, данные, наконец, сортируются, поэтому вы можете отображать их так, как хотите