<!DOCTYPE html> <head> <title>home</title> </head> <body> <h1>login here</h1> <form id="createuserform" method="post"> <label>First Name: </label> <input id="fname" type="test"></br> <label>Last Name: </label> <input id="lname" type="text"></br> <label>Location: </label> <input id="location" type="text"></br> <input id="createUser" type="button" value="create user"></br> <input id="setter" type="text" value="val"> </form> <script> function submitValue() { var r; fetch('http://localhost:8080/multimediaApi/api/multimedia/users').then(response => (response.json())).then(data => r = data[0]); document.getElementById("setter").value = r; } </script> <button onclick="submitValue()">Get Data</button> </body> </html> Quiero obtener los datos de la URL de la API anterior y almacenarlos en la variable r . Entonces, he usado then(data => r= data[0]) para asignar valor a la variable r . y luego mostrarlo en el campo de textfield document.getElementById("setter").value=r . Pero el valor del valor en r viene como undefined .
En la ejecución de la función submitValue , el valor de r no estará undefined e iniciará una solicitud AJAX que se completará en algún momento más tarde, y el valor se asigna a
document.getElementById( "setter" ).value = r; no estará undefined cuál es el valor actual de r .
Later some time the request is completed
Entonces, el siguiente código se ejecuta
fetch( 'http://localhost:8080/multimediaApi/api/multimedia/users' ) .then( response => ( response.json() ) ) // now run .then( data => r = data[0] ); // now run En esto, solo está asignando los data[0] a r . El código de descanso ya se ejecutó antes y no se volverá a ejecutar. Así es como funciona ASYNC JS.
Debería leer Comprender el objeto de promesa de JavaScript
Puede asignar directamente los data[0] al elemento HTML con id setter como:
function submitValue() { fetch( 'http://localhost:8080/multimediaApi/api/multimedia/users' ) .then( response => ( response.json() ) ) .then(data => { document.getElementById( "setter" ).value = data[0]; }) }