Tuesday, October 29, 2013

How to Consume WEB API in Java Script

How to Consume WEB API in Java Script


1) Create a HTML Page/ASPX Page etc.,

2) Add following input elements and 4 buttons for POST,DELETE,PUT,GET

3) Div Element to display all results   


        <b>Id:</b><input type="text" value="" id="txtId" /><br />
        <b>cusomer Name:</b><input type="text" value="" id="txtName" /><br />
        <b>Date Joined:</b><input type="date" value="" id="doj" /><br />
        <b>EmailID:</b><input type="email" value="" id="txtEmail" /><br />
        <b>Mobile:</b><input type="text" value="" id="txtMobile" /><br />
       
        <input type="button" value="POST" onclick="javascript: CustomerWebApi('POST')" />&nbsp;&nbsp;
        <input type="button" value="PUT" onclick="javascript: CustomerWebApi('PUT')" />&nbsp;&nbsp;
        <input type="button" value="DELETE" onclick="javascript: CustomerWebApi('DELETE')" />&nbsp;&nbsp;
        <input type="button" value="GET" onclick="javascript: CustomerWebApi('GET')" />&nbsp;&nbsp;
        <br />
        <div id="cusomersTbl"></div>

4) Add Javascript Ajax function to do CRUD operations on Web API


Here JSON object  has/required 5 elements. custID,Name,DOJ,szEmailID,Mobile


    <script type="text/javascript">
       
        function CustomerWebApi(verb) {
            var url = "http://localhost:42340/api/customer";
            var jsonCustomer = "";
            
            if (verb == "DELETE" || verb == "PUT") {

                url = url + "/" + document.getElementById("txtId").value;
            }
            if (verb == "POST" || verb == "PUT") {

               jsonCustomer = "";

               jsonCustomer += "\"custId\"" + ":"+document.getElementById("txtId").value + ",";
                jsonCustomer += "\"Name\"" + ":\"" + document.getElementById("txtName").value + "\",";

                var isoDate = new Date(document.getElementById("doj").value).toISOString();
                jsonCustomer += "\"DOJ\"" + ":\"" + isoDate + "\",";

                jsonCustomer += "\"szEmailID\"" + ":\"" + document.getElementById("txtEmail").value + "\",";

                jsonCustomer += "\"Mobile\"" + ":\"" + document.getElementById("txtMobile").value+"\"";
                //jsonCustomer = JSON.stringify(jsonCustomer);

                jsonCustomer = "{" + jsonCustomer + "}";
            }
            if (verb == "GET") jsonCustomer = "";

 alert(jsonCustomer+url+verb);

            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open(verb, url, false);
            xmlHttp.setRequestHeader("Content-type", "application/json");
            xmlHttp.send(jsonCustomer);
            //alert(xmlHttp.status);
            //alert(xmlHttp.responseText); alert(xmlHttp.statusText);

            if (verb == "GET") {
                var customers = eval('(' + xmlHttp.responseText + ')');
                DisplayData(customers);
            }
          
        }

        function DisplayData(customers)
        {
            var divE = document.getElementById("cusomersTbl");
            for (i = 0; i < customers.length; i++) {
                divE.innerHTML += customers[i].custId + " " + customers[i].Name + "<br/>";
            }

        }
    </script>


Press on GET gets all records from the database
Press POST button adds a record to the database 
Press PUT modifies specific record User must specify CustID
Press DELETE deletes record from the Database User must specify custID