Hola estoy haciendo un curso y uno de los proyectos es un generador de nombres que hicimos usando esta api http://uinames.com/api/?, lo pude finalizar pero el problema es que cuando quiero generar mas de un nombre a la vez (ya que puedo seleccionar generar hasta 15) varios de estos nombres se repiten, dejo mi código a continuación
document.querySelector('#generar-nombre').addEventListener('submit', cargarNombres);
// Llamado a Ajax e imprimir resultados
function cargarNombres(e) {
e.preventDefault();
// Leer las variables
const origen = document.getElementById('origen');
const origenSeleccionado = origen.options[origen.selectedIndex].value;
const genero = document.getElementById('genero');
const generoSeleccionado = genero.options[genero.selectedIndex].value;
const cantidad = document.getElementById('numero').value;
let url = '';
url += 'http://uinames.com/api/?';
// Si hay origen agregarlo a la URL
if(origenSeleccionado !== '') {
url += `region=${origenSeleccionado}&`;
}
// Si hay un genero agregarlo a la URL
if(generoSeleccionado !== '') {
url += `gender=${generoSeleccionado}&`;
}
// Si hay una cantidad agregarlo a la URL
if(cantidad !== '') {
url += `amount=${cantidad}&`;
}
// Conectar con ajax
// Iniciar XMLHTTPRequest
const xhr = new XMLHttpRequest();
// Abrimos la conexion
xhr.open('GET', url, true);
// Datos e impresion del template
xhr.onload = function() {
if(this.status === 200) {
const nombres = JSON.parse( this.responseText ) ;
if (typeof(nombres) === 'Object') {
nombres = [nombres];
// Generar el HTML
let htmlNombres = '<h2>Nombres Generados</h2>';
htmlNombres += '<ul class="lista">';
// Imprimir cada nombre
nombres.forEach(function(nombre) {
htmlNombres += `
<li>${nombre.name}
`;
});
htmlNombres += '</ul>';
document.getElementById('resultado').innerHTML = htmlNombres;
}}
}
// Enviar el Request
xhr.send();
}
</li>