How to check redundancy in for loop

Question

I am pulling some information from an API and one of my fields may or may not have duplicate content. How do I identify the redundancy and not print it on the screen if it's a duplicate?

Here's my loop, and "Description" is the field that sometimes has the same content as its previous sibling:

for (i = 0; i < data.length; i++) {
    htmlString += '<li><h3 class="session-item">' + data[i].Title + '</h3>';
    htmlString += '<p class="session-description">' + data[i].Description + '</p></li>';
}

Is this something I should check/compare with the previous sibling or is there a better way?

I tried a simple comparison but this didn't work:

var tempDesc = document.getElementsByClassName('session-description');
for (i = 0; i < data.length; i++) {
    htmlString += '<li><h3 class="session-item">' + data[i].Title + '</h3>';
    if(tempDesc === data[i].Description) {
        htmlString += '</li>';
    } esle {
        htmlString += '<p class="session-description">' + data[i].Description + '</p></li>';
    }
}

Answer 1

You already have the index so a simple solution is to get the last index with i - 1:

for (i = 0; i < data.length; i++) {
    htmlString += '<li><h3 class="session-item">' + data[i].Title + '</h3>';
    

    if (data[i].Description !== data[i - 1].Description) {
        htmlString += '<p class="session-description">' + data[i].Description + '</p></li>';
    } else {
        htmlString += '</li>';
    }
}

But you want to check if it data[i - 1] exists first:

if (data[i].Description !== (data[i - 1] && data[i - 1].Description)) {

If you want a shorter answer then you could use the more advanced optional chaining:

if (data[i].Description !== data[i - 1]?.Description) {

Answer 2

const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]));
data.reduce((x,y) => (x.filter(x => isEqual(x, y)).length > 0) ? x : x.concat([y]), []);

then, use data with every way you want, all elements are unique :)

Answer 3

Presuming your dataset looks something like this:

const apiResponse = [
  { Title: 'Sanity and Tallulah', Description: 'Description 1' },
  { Title: 'Zita the Space Girl', Description: 'Description 2' },
  { Title: 'Lumberjanes', Description: 'Description 1' },
];

...and I am understanding your goal correctly that you want to suppress duplicate descriptions but keep the titles, I would suggest one approach is to use a Set as you are looping to add to the DOM, and check to see if the description is already present in the Set before writing it. Something like:

const apiResponse = [
  { Title: 'Sanity and Tallulah', Description: 'Description 1' },
  { Title: 'Zita the Space Girl', Description: 'Description 2' },
  { Title: 'Lumberjanes', Description: 'Description 1' },
];

const descriptions = new Set();

for (let item of apiResponse) {
    document.body.append(item.Title)
    document.body.append(document.createElement('br'))
    if (!descriptions.has(item.Description)) {
      descriptions.add(item.Description);
      document.body.append(item.Description)
      document.body.append(document.createElement('br'))
      document.body.append(document.createElement('br'))
    }
}

This approach would allow a single loop and avoid having to do comparisons in/against the DOM as a source of truth.

Another option (explored in other answers already) is to first loop the responses and eliminate duplicate values and then loop to push to the DOM.