2

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();

}
5
  • Saludos, tu comentas que puedes generar hasta 15 nombres, te sugiero usar in while.. y un ciclo for, tambien un array para almacenar los nombres generados y cada vez que genere un nombre tu url agrega al array antes verifica que no exista en el mismo y asi continua pidiendo nuevos nombres hasta que completes tu ciclo de 15 que sean diferentes todos... Commented el 18 dic. 2018 a las 22:11
  • Deberías de cerrar el tag de los elementos de la lista </li>
    – JoshuaCS
    Commented el 18 dic. 2018 a las 22:51
  • muchas gracias por el comentario, mira te paso la pagina que subi para hacer una prueba elbotdeempanadas.ml/nombres/index.html ahora puse qu e se puede generar hasta 100 nombres pero el problema es que la api cada vez que pido mas de un nombre el objeto me lo trae como un array, un amigo me dijo de probar con un if (typeof(nombres) === 'Object') nombres = [nombres] pero nose si lo estoy colocando mal pero no puedo hacerl ofuncionar tampoco Commented el 19 dic. 2018 a las 1:35
  • aca estan los ejemplos de como funciona la api uinames.com/api/… Commented el 19 dic. 2018 a las 1:41
  • uinames.com/api/… Commented el 19 dic. 2018 a las 1:42

1 respuesta 1

0

Por lo q puedo apreciar, tu codigo está bien. Si los nombres se repiten, es porque la API q estás utilizando los genera repetidos. Tienes 3 opciones: 1. Filtrar la lista de nombres q estas recibiendo como respuesta de la API y dejar fuera los repetidos. 2. Cambiar de API y comienzar a utilizar una q no genere nombres repetidos. 3. Modificar el código de dicha API para q no devuelva nombres repetidos.

La opción más viable parece ser la primera. Good luck!

4
  • muchas gracias por el comentario, mira te paso la pagina que subi para hacer una prueba elbotdeempanadas.ml/nombres/index.html ahora puse qu e se puede generar hasta 100 nombres pero el problema es que la api cada vez que pido mas de un nombre el objeto me lo trae como un array, un amigo me dijo de probar con un if (typeof(nombres) === 'Object') nombres = [nombres] pero nose si lo estoy colocando mal pero no puedo hacerl ofuncionar tampoco Commented el 19 dic. 2018 a las 1:35
  • este es el ejemplo de como funciona la api si entrega un nombre uinames.com/api/… si entrega 10 nombres uinames.com/api/… Commented el 19 dic. 2018 a las 1:42
  • Pablo, volví a leer tu pregunta para asegurarme. En ningún momento has dejado explícito qué es lo que quieres hacer. Dices que la API responde con un array y que los nombres están repetidos, pero no dices cual es el comportamiento que decearias. Lo ideal sería poner un ejemplo de qué esperas y de qué estas obteniendo actualmente. Así te podré ayudar
    – JoshuaCS
    Commented el 19 dic. 2018 a las 2:00
  • muchas gracias, tienes razon, el comportamiento que desearia tener es que me entregue los nombres sin repetirse como paa en la api se la pruebo sola entrega los nombres sin repetir Commented el 19 dic. 2018 a las 11:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.