<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> let container = document.querySelector('.card-container') const img = `https://source.unsplash.com/random/200x150?person` const imgPost = `https://source.unsplash.com/random/600x400?nature` async function principal(){ [textos, names] = await Promise.all([ fetch(`https://jsonplaceholder.typicode.com/posts`), fetch(`https://jsonplaceholder.typicode.com/users`) ]); let textObj = await textos.json() let nameObj = await names.json() let html = '' let fotoPerfil = await distinto(img) let fotoPost = await distinto(imgPost) console.log(fotoPerfil) console.log(fotoPost) let foto1; let foto2; for (let i = 0; i < 10; i++) { let texto = textObj[i].title; let name = nameObj[i].name; if (foto1 !== fotoPerfil[i]) { html += `<div class="card"> <div class="card-header"> <img src="${fotoPerfil[i]}" class="fadeIn"> <h3 class="fadeIn">${name}</h3> </div> <div class="card-content"> <div class="card-text"> <p class="fadeIn">${texto}</p> </div> <div class="card-post"> <img src="${fotoPost[i]}" class="fadeIn"> </div> </div> </div>` foto1 = fotoPerfil[i] foto2 = fotoPost[i] }else { console.log('cualquier cosa') } } container.innerHTML = html /* checkBoxes() */ } principal() async function distinto(dir){ let ArrFotos = await Promise.all([fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir), fetch(dir)]) let fotos = [] ArrFotos.forEach(obj =>{ fotos.push(obj.url) }) let fotosUnicas = [...new Set(fotos)] return fotosUnicas } <!-- end snippet -->