Using fetch api in html

Question

I have an easy problem regarding the use of fetch in html files.

I've created an API in AWS Api Gateway that has a simple GET method: the GET method returs a json.

Now, if i access directly or using postman to the link of my method it works correctly, but when i try to use fetch something wrong happens and i see no results.

I search on the internet because i don't know neither javascript nor html, but i can't find how make it works correctly. For example what i'm trying to do in the code that follows is to put the json taken via GET into a label.

This is my html file:

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>test.html</title>
   </head>
   <body>
      <dl>
         <dt>Page 1</dt>
         <dd>Go to <a href="https://xxx.execute-api.eu-central- 
   1.amazonaws.com/prod/getcustomerdetailsbyemail/">link</a></dd>
      </dl>
      <p> <input name="Button" value="Click me" onclick="buttonClick()" type="button">&nbsp;<input
         name="Button2" value="Click me 2" formmethod="get" onclick="buttonClick2()" type="button">
      </p>
      <p> <input id="myText" name="Message" value="Insert text" type="text"></p>
      <label for="myText" id="mylabel"></label>
      <div id="myData"> </div>
      <dl>
      </dl>
      <dl>
      </dl>
      <script type="text/javascript">
         function buttonClick(){
            alert(document.getElementById("myText").value);
         }
      </script>
      <script type="text/javascript">
         function buttonClick2(){
          fetch("https://xxx.execute-api.eu-central-1.amazonaws.com/prod/getcustomerdetailsbyemail")
           .then(response => {
               document.getElementById("mylabel").value = response.json();
           })
           .catch(error => {
               alert("Nope");
           });
      </script>
   </body>
</html>

How can i put the json returned by the get call into a label?

I have another question: if i put console.log("message") in a script in an html file, what should i expect to happen when the script is run? (Spoiler: nothing happens, why?)

I apologize if I am ignoring something crucial, but I don't know where to start.

Change this line - document.getElementById("mylabel").textContent = response.json(); HTML labels dont have a value property, but HTML input does — Kunal Mukherjee
– Kunal Mukherjee, Commented Aug 7, 2020 at 15:50
consider parsing your json after resolving it, do not immediately push it to the node value — EugenSunic
– EugenSunic, Commented Aug 7, 2020 at 15:55

GMaiolo · Accepted Answer · 2020-08-07 15:53:10Z

5

The issue is that response.json() yields a Promise, so you'll need to wait for that to resolve and consume the result:

function buttonClick2(){
  fetch("https://your-url.com")
   .then(response => response.json()) // <-- important line
   .then(response => {
       // changed .value to .innerHTML but you can handle it as you wish
       document.getElementById("mylabel").innerHTML = response;
   })
   .catch(error => {
       alert("Nope");
   });
}

Here you can check the documentation for Body.json() with examples

answered Aug 7, 2020 at 15:53

GMaiolo

4,6681 gold badge26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fabianod Over a year ago

It works, you are the best! Thank you, thank you very much.

Collectives™ on Stack Overflow

Using fetch api in html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related