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