0

he intentado de todo para poder mostrar un POST en HTML con un APIrest de reqres.in intentando poner los datos que introduzca el usuario en los inputs en un cuadro pero me ha parecido particularmente dificil.

Me gustaria que los datos que introduzca el usuario aparecieran dentro del cuadro de #caja, pero a pesar de todo me sigue apareciendo el siguiente mensaje de error en la consola:

Uncaught TypeError: Cannot read property 'forEach' of undefined at Object.success (ajax.js:35)

HTML:

<form action="https://reqres.in/api/users" method="POST" id="formulario">
        <p>
            Nombre: <input type="text" name="name">
        </p>
        <p>
            Web: <input type="text" name="web">
        </p>
        <p>
            <input type="submit" value="Registrar" id="submit">
        </p>
    </form>
    <span id="aviso">Usuario Registrado con Exito</span>
    <div id="datos">

    </div>

JS:

$("#formulario").click(function(response){
        response.preventDefault();

        var usuario = {
            "nombre": $('input[name="name"]').val(),
            "web": $('input[name="web"]').val()
        }

        $.post($(this).attr("action"), usuario, function(response){
            console.log(response);

        usuario.response.forEach(function(element){
                $("#datos").append("<ul><li><p>"+element+"</p></li></ul>");
        });
        return false;
        });

    });

1 respuesta 1

0

primero que nada debemos conocer que respuesta te devuelve el servicio https://reqres.in/api/users y haciendo un par de pruebas la respuesta es la siguiente:

{
    "nombre": "Juan",
    "web": "www.google.com",
    "id": "578",
    "createdAt": "2020-07-24T23:24:47.951Z"
}

Ahora, por cómo lo veo, deberías trabajar con el objeto de respuesta que obtienes como resultado (el que vemos arriba que tiene 4 propiedades).

Por otro lado, el error del forEach es por que en primer lugar la propiedad usuario.response es undefined ya que el objeto usuario no tiene dicha propiedad y la sentencia forEach no puede iterar sobre una propiedad no definida.

Por último, la información que deberias mostrar dentro del div podría ser algo como:

var datos = $('<ul></ul>');
var name = $('<li></li>').text(response.nombre).appendTo(datos);
var name = $('<li></li>').text(response.web).appendTo(datos);
var name = $('<li></li>').text(response.id).appendTo(datos);
$("#datos").append(datos);

Saludos.

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.