Banking API queried by Javascript

Question

I am finalising a college project and I am stuck.

I have created an API in netbeans and it is working fine.

Returing e.g.

<?xml version="1.0" encoding="UTF-8"?> 
   <accountholder> 
       <accountnumber>45672</accountnumber> 
       <address>234 THE BANK, DUBLIN 1</address> 
       <balance>763.32</balance> 
       <email>JOHANN@SMITH.COM</email> 
       <firstname>JOHANN</firstname> 
       <id>1</id> 
       <lastname>SMITH</lastname> 
       <pinnumber>1234</pinnumber> 
   </accountholder>

Now I am trying to create a javascript to return data when searching by Id.

<script language="javascript" type="text/javascript">
var request = null;

function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("MsXML2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}

if (request == null)
alert("Error creating request object!");
}
function getMessage()
{
createRequest();
var accountholderid = document.getElementById("Id").value;
id=eval(accountholderid);
var url = "http://localhost:8080/BankProjectApi/webresources/bankprojectapi.accountholder/"+id;
request.onreadystatechange = handleResponse;
request.open("GET", url, true);
request.send(null);
}
function handleResponse() {
if (request.readyState==4 && request.status==200)
{ 
var xmlDocument=request.responseXML;
var firstname = xmlDocument.getElementsByTagName("firstname");
var lastname = xmlDocument.getElementsByTagName("lastname");
var accountnumber = xmlDocument.getElementsByTagName("accountnumber");

for(var i=0; i<firstname.length; i++) {
var firstname = firstname[i].childNodes[0].nodeValue;
var lastname = lastname[i].childNodes[0].nodeValue;
var accountnumber= accountnumber[i].childNodes[0].nodeValue;
document.getElementById('lastname').value=firstname;
document.getElementById('firstname').value=lastname;
document.getElementById('accountnumber').value=accountnumber;
}
}

}
</script>

In the body I have an input textfield with a button with an on click:

<td>Enter Account holder ID : </td>
<td><input type="text" id="playerid" size="10"/>

<input type="button" value="Get Details" onclick="getMessage()"/>
</tr>
<tr>
<td>Account holder Last Name : </td>
<td> <input type="text" id="lastname" size="10"/> </td>
</tr>

<tr>
<td>Account holder First Name : </td>
<td> <input type="text" id="firstname" size="10"/> </td>
</tr>

<tr>
<td>Account number : </td>
<td> <input type="text" id="accountnumber" size="10"/> </td>
</tr>

What am I missing as it is not returning anything :(

Answer 1

I believe your id value for the 'accountholderid' was looking for 'Id' instead of 'playerid'.

May I ask why you are calling 'eval' on the value? Do you need parseInt?

(function () {

var request = null;

function createRequest() {
    try {
        request = new XMLHttpRequest();
    } catch (trymicrosoft) {
        try {
            request = new ActiveXObject('MsXML2.XMLHTTP');
        } catch (othermicrosoft) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (failed) {
                request = null;
            }
        }
    }

    if (request === null) {
        alert('Error creating request object!');
    }
}

function getMessage() {
    createRequest();

    var accountholderid = document.getElementById('playerid').value,
        id = eval(accountholderid),
        url = 'http://localhost:8080/BankProjectApi/webresources/bankprojectapi.accountholder/' + id;

    request.onreadystatechange = handleResponse;
    request.open("GET", url, true);
    request.send(null);
}

function handleResponse() {
    if (request.readyState === 4 && request.status === 200) { 
        var xmlDocument = request.responseXML,
            firstname = xmlDocument.getElementsByTagName('firstname'),
            lastname = xmlDocument.getElementsByTagName('lastname'),
            accountnumber = xmlDocument.getElementsByTagName('accountnumber');

        for(var i = 0, max = firstname.length; i < max; i += 1) {
            var firstname = firstname[i].childNodes[0].nodeValue,
                lastname = lastname[i].childNodes[0].nodeValue,
                accountnumber = accountnumber[i].childNodes[0].nodeValue;

            document.getElementById('lastname').value = firstname;
            document.getElementById('firstname').value = lastname;
            document.getElementById('accountnumber').value = accountnumber;
        }
    }

}

}());

Also, I did a quick refactoring of your code to aid in my assessing the issue, adhere to more community conventions as well as avoid common JS pitfalls. (ex. closure, missing var declarations, ===, curlys everywhere, single variable pattern, and some others).