0

Testing async before making more complex code. I have an HTML file that tries to get a dataset using an async fetch function, located in a Javascript file, from my database. I want to store the dataset in a variable inside the HTML file which would then place it inside a SPAN HTML element tag. When executing and looking at my browser log, I can see that the dataset has been retrieved from the database, but it is not returning to be stored in the HMTL var. I have tried some solutions, but they have not worked. I would appreciate knowing why they did not work and a solution, please.

CODES: HTML FILE:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="queryFile.js"></script>
</head>
<body>

<h2>The XMLHttpRequest Object</h2>
<h3>Start typing a name in the input field below:</h3>

<p>Suggestions: <span id="txtHint"></span></p> 
<p>First name: <input type="text" id="txt1" ></p>


</body>
<script>
    const seeing = getBuyData("fff","2ddds");
    console.log(seeing)
    document.getElementById("txtHint").innerHTML = seeing;

</script>

CODES: JAVASCRIPT FILE:

async function getBuyData(starter, ender) {
   if (starter.length == 0) {
       console.log("No Data to POST");
       return;
   } else {
       const xmlhttp = new XMLHttpRequest();
       xmlhttp.onload = function() {
       var gotten_Text = this.responseText;
       console.log(gotten_Text) //THIS PART WORKED

       return gotten_Text;
       }
   xmlhttp.open("POST", "getFXData.php?case01=1&str=" + starter + "&ed=" + ender);
   xmlhttp.send();
   }
}

THE FOLLOWING BELLOW ARE MY ATTEMPTED SOLUTIONS:

1)

document.getElementById("txtHint").innerHTML = getTheData("fff","2ddds");

const seeing = getBuyData("fff","2ddds");
console.log(seeing)
document.getElementById("txtHint").innerHTML = seeing;

getBuyData("fff","2ddds").then(
        function(value) {
            document.getElementById("txtHint").innerHTML = value;;
        },
        function(error) {
           console.log(error);
        }
    );

async function getTheData01() {
        var fstep = await getBuyData("fff","2ddds");
        document.getElementById("txtHint01").innerHTML = fstep;
    }
Enrico Everett
  • 1
  • Your `getBuyData` function doesn't return anything – Idrizi.A Jun 04 '22 at 13:19
  • Try this answer on how to return your data using a Promise: https://stackoverflow.com/a/48969580/1354378 – Idrizi.A Jun 04 '22 at 13:21
  • Your last approach is the closest to being correct. Your problem is that `getBuyData()` returns a Promise that resolves to `undefined` as `getBuyData` is an `async` function but doesn't return anything (only the inner callback is using `return`). Rather than using `XMLHttpRequest`, look into using the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), which automatically uses [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). – Nick Parsons Jun 04 '22 at 13:21
  • Thanks for the response and the insight into using async. I am new to javascript, and I'm using w3school to have an overview understanding...I had used one of their examples ([link](https://www.w3schools.com/js/tryit.asp?filename=tryjs_async)) for solution 3, but not sure why they were able to use the return string (that is not a promise), I was not? – Enrico Everett Jun 04 '22 at 13:46

0 Answers0