Estoy extrayendo información de una API y uno de mis campos puede o no tener contenido duplicado. ¿Cómo identifico la redundancia y no la imprimo en pantalla si es un duplicado?
Aquí está mi ciclo, y "Descripción" es el campo que a veces tiene el mismo contenido que su hermano anterior:
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>'; }¿Es esto algo que debería verificar/comparar con el hermano anterior o hay una mejor manera?
Intenté una comparación simple pero esto no funcionó:
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>'; } }Ya tiene el índice, por lo que una solución simple es obtener el último índice con 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>'; } } Pero desea verificar si data[i - 1] existen primero:
if (data[i].Description !== (data[i - 1] && data[i - 1].Description)) {Si desea una respuesta más corta, puede usar el encadenamiento opcional más avanzado:
if (data[i].Description !== data[i - 1]?.Description) {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]), []); luego, use data de todas las formas que desee, todos los elementos son únicos :)
Suponiendo que su conjunto de datos se parece a esto:
const apiResponse = [ { Title: 'Sanity and Tallulah', Description: 'Description 1' }, { Title: 'Zita the Space Girl', Description: 'Description 2' }, { Title: 'Lumberjanes', Description: 'Description 1' }, ]; ... y entiendo correctamente su objetivo de que desea suprimir las descripciones duplicadas pero mantener los títulos, sugeriría que un enfoque es usar un Set mientras realiza un bucle para agregar al DOM, y verifique si la descripción es ya presente en el Set antes de escribirlo. Algo como:
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')) } }Este enfoque permitiría un solo ciclo y evitaría tener que hacer comparaciones en/contra el DOM como fuente de verdad.
Otra opción (ya explorada en otras respuestas) es primero hacer un bucle de las respuestas y eliminar los valores duplicados y luego hacer un bucle para enviar al DOM.