Javascript API call getting response

Question

I am trying to make one api call in my javascript and then use the response it gives for a second API call. However, I am getting an error because a null response is getting returned by the first function, even though when I call the API with the same parameters being outputted it returns a response fine.

Below is the entirety of the code I am working on:

document.getElementById("createUserButton").onclick = function () {
                //below is the code that creates the user in the Physician table
                var xhttp = new XMLHttpRequest();
                var attendingBool;
                if(document.getElementById("isAttending").checked == true) {
                    attendingBool=1;
                } else {
                    attendingBool=0;
                }

                var hrtBool;
                if(document.getElementById("hrt").checked==true) {
                    hrtBool = 1;
                } else {
                    hrtBool = 0;
                }

                var intYear = parseInt(document.getElementById("pos").value);

                var body = {
                    "firstName": document.getElementById("fn").value,
                    "lastName": document.getElementById("ln").value,
                    "yearNum": intYear,
                    "position": document.getElementById("pos").value,
                    "isAttending": attendingBool,
                    "highRiskTrained": hrtBool
                }
                console.log("below is the body:");
                console.log(body);

                if(document.getElementById("password").value == document.getElementById("password2").value) {
                    //this means that the passwords are in fact the same thing!
                    console.log("the passwords are equal");
                    xhttp.open("POST", "http://url/createPhysician/", true);
                xhttp.setRequestHeader("Content-type", "application/json");
                xhttp.send(JSON.stringify(body));
                var response = (xhttp.responseText);
                console.log("created user in Physician table");
                console.log(response);

                //below gets the most recently added PhysicianID number for adding to the user tbl
                xhttp.open("GET", "http://url/getRecentPhysicianID/", true);
                xhttp.setRequestHeader("Content-type", "application/json");
                xhttp.send();
                var response = (xhttp.responseText);
                console.log("got most recent PhysicianID");
                console.log(response);

                //below creates the new user in the Users table
                var params = {
                    "username": document.getElementById("username").value,
                    "password": document.getElementById("password").value,
                    "physicianID": response
                }
                console.log("below is the value of params varibale");
                console.log(params);

                var xhttp = new XMLHttpRequest();
                xhttp.open("POST", "http://url/createUser/", true);
                xhttp.setRequestHeader("Content-type", "application/json");
                xhttp.send(JSON.stringify(params));
                //var response = (xhttp.responseText);
                window.alert("New User Created");

The error is coming from the lack of a physicianID which is being set by the response, but ends up being null.

@Quentin 1) syncrhonous HTTP requests are a bad idea and fetch is easier to use. 2) He hasn't bothered to google before coming to stack overflow — Aluan Haddad
– Aluan Haddad, Commented Feb 8, 2018 at 21:28
I don't think you are using xmlhttp the right way as you execute the code without any callback. The async call is not finished when the line after send is executed. See reference for xmlhttp to see how to attach an event listener to xmlhttp object — Pierre
– Pierre, Commented Feb 8, 2018 at 21:29
@AluanHaddad — (1) They aren't making a synchronous HTTP request. Fetch is a complicated beast, while the fact it returns a promise can make it easier in some situations, I've seen plenty of people struggle to use it. (2) I can't think of any obvious search terms that they should use to find a solution to this problem. — Quentin
– Quentin, Commented Feb 8, 2018 at 21:31

Quentin · Accepted Answer · 2018-02-08 21:27:11Z

2

You are making the request, and then trying to read the response before the browser has received it.

You need to wait for the data to load before you can do anything with it.

xhttp.open("POST", "http://url/createPhysician/", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send(JSON.stringify(body));
xhttp.addEventListener("load", handle_response);

function handle_response() {
    var response = this.responseText;
    console.log(response);
}

answered Feb 8, 2018 at 21:27

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Drew Over a year ago

I have put the second API call I make in the handle_response() function, but it never runs

floverdevel · Accepted Answer · 2018-02-08 21:39:51Z

-1

You're missing the onreadystatechange function. That is where you will receive the response from your Ajax call.

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

See : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange

edited Feb 8, 2018 at 21:39

answered Feb 8, 2018 at 21:29

floverdevel

1498 bronze badges

2 Comments

Quentin Over a year ago

Please avoid link only answers. Answers that are "barely more than a link to an external site” may be deleted.

floverdevel Over a year ago

@Quentin i adjust my response to add an example. it's not just a link anymore. i think it's a good answer

Collectives™ on Stack Overflow

Javascript API call getting response

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related