XMLHttpRequest Keeps returning Null

Question

I have a doing a tutorial for XMLHttpRequest but I can't seen to figure out why my data is returning null. I need to make a request to the url and return a random word. The first time the interval invokes, the html will dispaly loading... but every time after that, it is blank. Any help is appreciated

Here is a code snippet of my HTML

<div>
 <h1>Data to be added</h1>
 <h1 id='add-text'></h1>
</div>

Here is a snippet of my Javascript

let obj = {
  isLoading: false,
  load: function() {
    if (this.isLoading) {
      return null;
    } else {
      this.isLoading = true;
    }
    let request = new XMLHttpRequest();
    let response = "loading...";
    request.addEventListener("load", function(ev) {
      response = ev.target.response;
      this.isLoading = false;
      console.log('event log', response) //logs "Random Words API" as expected
    });
    request.open("GET", "https://random-words-api.vercel.app/");
    request.send();
    return response
  }
};
setInterval(function() {
  let response = obj.load();
  console.log('line 25', response) //logs loading... then null every time after first
  document.getElementById("add-text").innerText = response;
}, 4000);

When you use `return` inside a function stops the execution of everything after the `return`. So load() stops at the line `return null` every time, because `this.isLoading` has been set to `true`. What is your goal? — fortunee, Apr 21 '21 at 04:05
Your `else` block sets `isLoding` to `true` hence afterwards it returns `null` in your `if` statement. Reformat your `if - else` block to match your requirements. — ShivCK, Apr 21 '21 at 04:13
I want to display loading... until something is returned from GET. Then I want to display that response. @fortunee — CookieMonsta89, Apr 21 '21 at 04:15
`this` inside the _load_ event listener refers to the `XMLHttpRequest` instance, not your `obj` object. Also, you code is async so returning `response` won't work how you think — Phil, Apr 21 '21 at 04:26

Joel Wembo · Answer 1 · 2021-04-21T04:49:28.223

-1

This is one on my side

} else {
    this.isLoading = true;
}

and update this part of the code to display the response data

 request.addEventListener("load", function (ev) {
    response = ev.target.response;
    this.isLoading = false;
    console.log('event log', response); //logs "Random Words API" as expected
    document.getElementById("content").append(response);
    // or you can keep add-text id  document.getElementById("add-text").append(response);
});

I have just remove the else block statement, Try it by removing this block

edited Apr 21 '21 at 04:49

answered Apr 21 '21 at 04:20

Joel Wembo

769
5
9

If I do that, it displayis loading... forever and doesn't change – CookieMonsta89 Apr 21 '21 at 04:24
But it is printing the console the json response t, append the response after the loading... – Joel Wembo Apr 21 '21 at 04:37
update this part of the code request.addEventListener("load", function (ev) { response = ev.target.response; this.isLoading = false; console.log('event log', response); //logs "Random Words API" as expected document.getElementById("content").append(response); // or you can keep add-text id document.getElementById("add-text").append(response); }); – Joel Wembo Apr 21 '21 at 04:47

XMLHttpRequest Keeps returning Null

1 Answers1