0

Estoy usando Fetch Api para encontrar nombres con orígenes de distintos países e imprimirlos.

document.querySelector('#generar-nombre').addEventListener('submit', cargarNombres);

El resultado es el siguiente:
[![Es el resultado de la busqueda][1]][1]

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 += 'https://randomuser.me/api/?';
    // Si hay origen agregarlo a la URL
    if(origenSeleccionado !== '') {
        url += `nat=${origenSeleccionado}&`;
    }
    // Si hay un genero agregarlo a la URL
    if(origenSeleccionado !== '') {
        url += `gender=${generoSeleccionado}&`;
    }
    // Si hay una cantidad agregarlo a la URL
    if(cantidad !== '') {
        url += `results=${cantidad}`;
    }

    // Crear fetch
    fetch(url)
        .then(function(res) {
            return res.json();
        })
        .then(function(data) {
            let html = `<h2>Nombres Generados</h2>`;
            html += `<ul class="lista">`;
            data.results.forEach(function(nombre) {
                html += `
                    <li>nombre.name.first</li>
                `;
            });
            html += `</ul>`;
            document.querySelector('#resultado').innerHTML = html;
        })
        .catch(function(error) {
            console.log(error);
        })
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>
    <div class="container">
        <div id="contenido" class="contenido">
            <h1>Generador de Nombres</h1>
            <form action="#" id="generar-nombre">
                <div class="row">
                    <div class="six columns">
                        <label for="origen">Origen del Nombre:</label>
                        <select class="u-full-width" id="origen">
                            <option value=''>-- Seleccione --</option>
                            <option value="AU">Australia</option>
                            <option value="BR">Brasil</option>
                            <option value="CA">Canadaa</option>
                            <option value="ES">España</option>
                            <option value="FR">Francia</option>
                            <option value="IR">Irlanda</option>
                            <option value="mexico">Mexico</option>
                            <option value="GB">Gran Bretaña</option>
                            <option value="US">America</option>
                        </select>
                        <label for="genero">Genero:</label>
                        <select class="u-full-width" id="genero">
                                <option value=''>-- Seleccione --</option>
                                <option value="male">Hombre</option>
                                <option value="female">Mujer</option>
                        </select>
                        <label>Nombres a Generar</label>
                        <input type="number" id="numero" class="u-full-width" min="1" max="15" value="5">
                        <input class="button-primary u-full-width" type="submit" value="Generar">
                    </div>

                    <div class="six columns">
                        <div id="resultado"></div>
                    </div>
                </div>
                
            </form>
        </div>
    </div>
    
    <script src="js/app.js"></script>
</body>
</html>

Agrego imagen del resultado obtenido: introducir la descripción de la imagen aquí

3
  • 1
    ¿A qué te refieres con que no puedes imprimir? ¿Recibes datos, mensaje o error? Por favor edita tu pregunta y agrega esa información.
    – Triby
    Commented el 7 may. 2020 a las 23:27
  • 1
    Verificaste que te lleguen los resultados desde la api, mirando la pestaña red? La url es correcta? Commented el 7 may. 2020 a las 23:28
  • 1
    Intenta hacer un console.log(data) para ver que te retornan Commented el 7 may. 2020 a las 23:30

1 respuesta 1

1

Se debe a un detalle sencillo, estas usando template literals sin usar su mayor virtud, que es renderizar variables, checa aquello que tienes:

data.results.forEach(function(nombre) {
    html += `
        <li>nombre.name.first</li>
    `;
});

En especial esta parte de aqui:

<li>nombre.name.first</li>

Lo que deberias tener enrealidad es esto:

data.results.forEach(function(nombre) {
    html += `
        <li>${nombre.name.first}</li>
    `;
});

Es decir, esto:

<li>${nombre.name.first}</li>

Es decir, lo unico que se te olvidaba era usar ${} donde dentro de ${aqui} será renderizada tu variable.

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.