How to identify repeated items on a table based on data-attribute

Question

I'm trying to group the items of a table that comes from a database which is populated from various sources, one of them, an automatic alert/alarm system.

The table looks like this:

	var rows = [];
	var tableRows = $("#tabla1 > tbody > tr > td:nth-child(3)");
	tableRows.each(function(n){
		var row = {};
		var timecode = this.dataset.timecode;
		var service = this.dataset.service;
		row.timecode = timecode;
		row.service = service;
		rows.push(row)   
	});
	console.log(rows);

To give you more background, each row of the table is an alarm/alert generated either automatically or manually. The type of the alarm is indicated on a "data-service" attribute and the timestamp and zone code on another attribute called 'timecode'.

This is only an example, there are other columns on the table that are unnecessary to this example.

All I need to do is group or at least highlight all rows which 'timecode' are the same. Although the ideal case would be to erase similar items and leave only one highlighted which means that it is the same alarm with various types.

I have managed to organize the items in an object with each rows 'timecode' and 'service'. All those objects are in an array.

Now, I don't know how to compare each object with the others to see if there are similar 'timecodes'.

Last thing: sometimes the table could have up to 1000 rows, but normally it has 150-250 alarms. So, the time that could take to do any routine is something to consider.

Heretic Monkey · Accepted Answer

I wouldn't even bother with the object or anything else. You say want erase similar items and highlight one of them. All you'd need to do is find the current row's timecode. If there are other rows with the same timecode, remove them and highlight the current one.

$(function() {
  // Note that this is now a list of actual rows, rather than the `td`.
  var tableRows = $("#tabla1 > tbody > tr");
  // Keep track of which timecodes we've removed
  var dupeTimecodes = [];
  tableRows.each(function(n) {
    var row = $(this);
    var timecodeCell = row.find('td').eq(2);
    var timecode = timecodeCell.data('timecode');
    // dupes are cells with the same timecode, that's not this one
    var dupes = tableRows.find('td[data-timecode="' + timecode + '"]').not(timecodeCell);
    // tableRows.each is going to iterate over a cached copy of the DOM, so we need to check if we've already removed it
    if (dupes.length > 0 && dupeTimecodes.indexOf(timecode) === -1) {
      dupeTimecodes.push(timecode);
      // Add a class to the current row
      row.addClass('marked');
      // remove the duplicates
      dupes.each(function() {
        $(this).closest('tr').remove();
      });
    }
  });
});

.marked { background-color: red; }

How to identify repeated items on a table based on data-attribute

Answers (2)

Related Questions