Restful Spring Web Service Knock Out JS JQuery

                            Restful Spring Web Service Knock Out JS JQuery

 Hi Readers

      Here I am trying to bind the JSON result from my Restful Spring Web Service directly to the UI using Knockout JS.

   I am using my previously created Spring Restful Web Service(Student web service) to get the json response. I am binding the JSON response to the Knockout ViewModel.

Here I am using the Knockout ViewModel at the Client Side to bind the JSON data.

KO.mapping

Knockout provides mapping as the plugin.

ViewModel :

A KnockoutJS View is simply a HTML document with declarative bindings to link it to the ViewModel. KnockoutJS Views display information from the ViewModel, pass commands to it (e.g a user clicking on an element) and update as the state of the ViewModel changes.

Here I am writing my custom ViewModel and JSP UI to display the JSON result in the JSP page.

e.g.

function Student(data){
      this.stdName = ko.observable(data.stdName );
}

function studentViewModel() {
    var self = this;
   
    self.studentList = ko.observableArray();

     self.stdName = ko.observable();

     self.studentList .push(new Student({
                                                                        stdName = self.stdName();
                                                                       
                                                                  }));

    self.geStudents = function () {
        $.ajax({
            type: 'GET',   
            url: 'http://localhost:8080/Spring3RestWebServiceIntegration/module/path/'',
            contentType : "application/json",
            data : JSON.stringify(self.studentList ),
            dataType : "json",
            success : function(data) {
                var observableData = ko.mapping.fromJS(data);
                var array = observableData();
                self.customerList(array);
            },
            error : function(jq, st, error){
                alert(error);
            }
        });
    };

}

$(document).ready(function () {
    ko.applyBindings(new studentViewModel());

});

Finally I need to write the JSP UI to display the results using Knockout JS. I have created the MVC 4 application by putting JSP in views/jsp/studentDetails.jsp.

studentDetails.jsp

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-2.2.0.debug.js"></script>
<script src="~/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="~/MyScripts/customerviewmodel.js"></script>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>RegNo</th>
            <th>Name</th>
            <th>EmailAddress</th>
            <th>MobileNo</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: studentList">
        <tr>
            <td data-bind="text: stdId"></td>
            <td data-bind="text: stdRegNo"></td>
            <td data-bind="text: stdName"></td>
            <td data-bind="text: stdEmailAddress"></td>
            <td data-bind="text: stdMobileNo"></td>
        </tr>
    </tbody>
</table>

<br/>

TextBox :

Name : <input type="text" name="stdName" />

Button :

<input type="button" id="btnGetStudents" value="GetStudents" 
data-bind="click: getStudents">

Here studentList is a ko.observablearray  and data will get filled when the user click the button.

I am using KnockoutJS click handler to invoke getStudents() method from StudentViewModel, and when I am doing an AJAX Call to the Spring Restful Web Service with dataType json.

I am able to get the result back in JSP page.